diff --git a/performance_report.css b/performance_report.css
index cd55b82..4f0596a 100644
--- a/performance_report.css
+++ b/performance_report.css
@@ -68,10 +68,10 @@ html, body {
 #avatar_text{
     font-family: Helvetica Neue;
     font-style: normal;
-    font-weight: normal;
+    font-weight: bold;
     font-size: 20px;
     float: right;
-    margin-right: 15px;
+    margin-right: 5px;
     margin-top: -20px;
     color: rgba(0,0,0,1);
 }
@@ -80,7 +80,7 @@ html, body {
     width: 300px;
     height: 40px;
     margin-left: -50px;
-    background-color: white;
+    background: white;
     border-radius: 25px;
     margin-bottom: 10px;
     border-top-left-radius: 0px;
@@ -92,7 +92,6 @@ html, body {
     position: absolute;
     margin-top: 100px;
     left: 50px;
-
 }
 
 .sidenavweek {
@@ -112,6 +111,10 @@ html, body {
     fill: black;
 }
 
+#sidebarquiz {
+    font-weight: bold;
+}
+
 #quiz_card {
     fill: rgba(255,255,255,1);
     position: absolute;
@@ -124,17 +127,34 @@ html, body {
 #quiz_content {
     position: absolute;
     height: auto;
+    width: 750px;
     margin-left: auto;
     margin-right: auto;
     background-color: white;
     border-radius: 25px;
     margin-bottom: 30px;
-    top: 150px;
+    top: 130px;
+    left: -75px;
     padding-right: 30px;
     padding-left: 30px;
     /* left: calc(50% - 300px); */
 }
 
+#links {
+    position: fixed;
+    height: auto;
+    margin-left: 25px;
+    margin-right: 25px;
+    background-color: white;
+    border-radius: 25px;
+    margin-bottom: 30px;
+    top: 130px;
+    left: 67.5%;
+    padding-left: 15px;
+    padding-right: 15px;
+    text-align: center;
+}
+
 #quiz_options {
     position: relative;
     display: block;
@@ -146,7 +166,7 @@ html, body {
     font-style: normal;
     font-weight: bold;
     margin-top: 20px;
-    font-size: 35px;
+    font-size: 40px;
     color: orange;
 }
 
@@ -156,7 +176,7 @@ html, body {
     font-family: Helvetica Neue;
     font-style: normal;
     font-weight: bold;
-    font-size: 25px;
+    font-size: 30px;
     color: rgba(0,0,0,1);
 }
 
@@ -195,6 +215,66 @@ html, body {
     color: slateblue;
 }
 
+.question_number {
+    width: 155px;
+    white-space: nowrap;
+    text-align: left;
+    font-family: Helvetica Neue;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 30px;
+    color: rgba(112,112,112,1);
+}
+
 .question {
+    text-align: left;
+    font-family: Helvetica Neue;
     margin-bottom: 3px;
 }
+
+#links_heading {
+    margin-top: 15px;
+}
+
+#link1 {
+    margin-right: 10px;
+    margin-bottom: 15px;
+}
+
+#link2 {
+    display: inline-block;
+    margin-bottom: 15px;
+    left: 60%;
+}
+
+#summary {
+    text-align: justify;
+}
+
+#ytvideo {
+    display: block;
+    margin: auto;
+    padding-bottom: 15px;
+}
+
+#skill_rating {
+    margin-top: 10px;
+    width: max-content;
+    font-weight: bold;
+    font-size: 30px;
+}
+
+#overview {
+    border-radius: 25px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin: -15px;
+}
+
+#no_of_questions {
+    color: rgba(108, 122, 137, 1);
+    font-weight: normal;
+	font-size: 27px;
+}
\ No newline at end of file
diff --git a/performance_report.html b/performance_report.html
index 71204ee..64e4592 100644
--- a/performance_report.html
+++ b/performance_report.html
@@ -21,8 +21,8 @@
 
         <p id="avatar_text">Raphael Low<br>Student</p>
 
-         <div id = "sidenav">
-             <div id="overview_button">
+        <div id = "sidenav">
+            <div id="overview_button">
                 <svg id="icon" width="25px" height="25px" viewBox="0 0 16 16" class="bi bi-chevron-left" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                 </svg>
@@ -31,14 +31,14 @@
             
             <svg width = "300" height = "600">
                 <g>
-                    <rect rx="25" ry="25" width = "250" height = "260" fill="white"></rect>
+                    <rect id = "rect" rx="25" ry="25" width = "250" height = "260" fill="white"></rect>
                     <text class="sidenavweek" x="40" y="35" fill="Orange">Week 0</text>
-                    <line x1="50" y1="50" x2="50" y2="240" stroke-linecap="round" d="M5 40 l215 0" style="stroke:rgba(249, 220, 215, 1); stroke-width:3" />
-                    <line x1="50" y1="50" x2="50" y2="200" stroke-linecap="round" d="M5 40 l215 0" style="stroke:orange; stroke-width:3" />
+                    <line x1="50" y1="50" x2="50" y2="235" stroke-linecap="round" d="M5 40 l215 0" style="stroke:rgba(249, 220, 215, 1); stroke-width:4" />
+                    <line x1="50" y1="50" x2="50" y2="200" stroke-linecap="round" d="M5 40 l215 0" style="stroke:orange; stroke-width:4" />
                     <text class="sidenavweek2" x="70" y="85">Lecture 1</text>
                     <text class="sidenavweek2" x="70" y="135">Lecture 2</text>
                     <text class="sidenavweek2" x="70" y="185">Lecture 3</text>
-                    <text class="sidenavweek2" x="70" y="235">Quiz</text>
+                    <text id="sidebarquiz" class="sidenavweek2" x="70" y="235">Quiz</text>
                     <text class="sidenavweek" x="40" y="300" fill = "Grey">Week 1</text>
                     <text class="sidenavweek" x="40" y="350" fill = "Grey">Week 2</text>
                     <text class="sidenavweek" x="40" y="400" fill = "Grey">Week 3</text>
@@ -47,32 +47,42 @@
         </div>
     </div>
 
-    <div id="main_section" class="col-md-6 offset-md-3">
-        <div id="quiz_content">
+    <div id = "main_section" class="col-md-6 offset-md-3">
+        <div id = "quiz_content">
             <div id = "quiz_text">Alkanes (C1003)</div>
             <div id = "quiz_text2">Performance Report</div>
-            <hr>
+            <div id = "no_of_questions">25 Questions</div>
+
             <div id = "quiz_options">
-                <h3>General Overview</h3>
-                <h4 id = "score">Score</h4>
-                <h4 id = "skillrating">Skill Rating</h4>
-                <h5 id = "goodjob">Great Job!</h5>
-                <hr>
-                <h3>Breakdown of Questions Attempted by Skillset</h3>
-                <div id="skillsetpiechart"></div>
-                <div id="skillset_table_div"></div>
-                <hr>
-                <h3>Breakdown of Questions Attempted by Difficulty</h3>
-                <div id="difficultypiechart"></div>
-                <div id="difficulty_table_div"></div>
-                <hr>
-                <h3>Breakdown of Individual Questions</h3>
-                <div id = "individual_questions"></div>
+                <div id = "overview">
+                    <h3 id = "skill_rating">Skill Rating</h3>
+                    <h3 id = "score">Score</h3>
+                    <h4 id = "goodjob">Great Job!</h4>
+                </div>
+
+            <h3 style="font-weight: bold">Skillsets Tested</h3>
+            <div id="skillsetpiechart"></div>
+            <div id="skillset_table_div"></div>
+            <hr>
+            <h3 style="font-weight: bold">Difficulty Spread</h3>
+            <div id="difficultypiechart"></div>
+            <div id="difficulty_table_div"></div>
+            <hr>
+            <h3 style="font-weight: bold">Breakdown of Individual Questions</h3>
+            <div id = "individual_questions"></div>
             </div>
         </div>
-            
     </div>
 
+    <div id="links">
+        <h3 id="links_heading">Adaptive Links & Resources</h3>
+        <hr>
+        <p id = "summary">Summary</p>
+        <a id = "link1" class="btn btn-primary" target="_blank">Chemguide Alkanes Link</a>
+        <a id = "link2" class="btn btn-primary" target="_blank">Chemguide Alkenes Link</a>
+        <iframe id="ytvideo" width="430" height="305" frameborder="0" allowfullscreen></iframe>
+   </div>
+
 <!-- JAVASCRIPT CODE -->
 
     <script type="text/javascript">
@@ -80,15 +90,41 @@ <h3>Breakdown of Individual Questions</h3>
         var input = [];
 
         var skillrating = Number(localStorage.getItem("currentAverage"));
+        document.getElementById("skill_rating").innerHTML = "Skill Rating: " + skillrating;
+
+        var colourcode;
 
         if (skillrating >= 4.0) {
             document.getElementById("goodjob").innerHTML = "Great Job!"
+            document.getElementById("overview").style.background = "LightGreen";
+            document.getElementById("summary").innerHTML = "Congratulations! Your skill rating is above 4, which means you have a good grasp of this topic. Here are some additional recommended resources for you. Do note that these resources are are beyond the syllabus; they are meant to stretch your intellectual capacity. Have fun exploring!";
+            document.getElementById("link1").href = "https://www.chemguide.co.uk/mechanisms/frmenu.html#top";
+            document.getElementById("link2").href = "https://www.chemguide.co.uk/mechanisms/eladdmenu.html#top";
+            document.getElementById("ytvideo").src = "https://www.youtube.com/embed/IOViLLuDMTs";
+
         } else if (skillrating >= 3.0 && skillrating < 4.0) {
             document.getElementById("goodjob").innerHTML = "You did well!"
+            document.getElementById("overview").style.background = "Turquoise";
+            document.getElementById("summary").innerHTML = "Well done! Here are some additional recommended resources for you to view. Do note that these resources are beyond the syllabus. Happy exploring!";
+            document.getElementById("link1").href = "https://www.chemguide.co.uk/basicorg/bondmenu.html#top";
+            document.getElementById("link2").href = "https://www.chemguide.co.uk/organicprops/haloalkanemenu.html#top";
+            document.getElementById("ytvideo").src = "https://www.youtube.com/embed/ryHnC0wqTTo";
+
         } else if (skillrating >= 2.25 && skillrating < 3.0) {
             document.getElementById("goodjob").innerHTML = "You need to buck up!"
+            document.getElementById("overview").style.background = "LightSalmon";
+            document.getElementById("summary").innerHTML = "Currently, your skill rating is on the lower end, but don't worry. Below are some additional recommended resources to shore up your fundamental understanding of the topic. Do note that lecture notes and recordings are still more relevant, so revisit it if unsure!";
+            document.getElementById("link1").href = "https://www.chemguide.co.uk/organicprops/alkanemenu.html#top";
+            document.getElementById("link2").href = "https://www.chemguide.co.uk/organicprops/alkenemenu.html#top";
+            document.getElementById("ytvideo").src = "https://www.youtube.com/embed/ryHnC0wqTTo";
         } else {
             document.getElementById("goodjob").innerHTML = "Revise your fundamentals and try again!"
+            document.getElementById("overview").style.background = "Coral";
+            document.getElementById("summary").innerHTML = "Read up on the lecture notes and revisit the areas you are struggling at. Clarify with your tutor if you have any doubts. All the best!"
+            document.getElementById("link1").innerHTML = "Homepage";
+            document.getElementById("link1").href = "http://elasticbeanstalk-us-east-1-426858499614.s3-website-us-east-1.amazonaws.com/Course_Main.html";
+            var element = document.getElementById("link2");
+            element.parentNode.removeChild(element);
         }
 
         fetch('http://awsbino-env-2.eba-vh6jpy5i.us-east-1.elasticbeanstalk.com/report')
@@ -103,7 +139,7 @@ <h3>Breakdown of Individual Questions</h3>
             
         })
         .catch(err => {
-            console.log('Fetch error:' + err);
+            console.log('Fetch error: ' + err);
         });
 
         fetch('http://awsbino-env-2.eba-vh6jpy5i.us-east-1.elasticbeanstalk.com/quiz')
@@ -235,6 +271,7 @@ <h3>Breakdown of Individual Questions</h3>
 
                         if (input[i][2] == "Recall") {
                             recall += 1;
+                            document.getElementById(skillset).style.color = "OrangeRed";
                             if (input[i][3] == 1) {
                                 recallcorrect += 1;
                                 document.getElementById(heading).innerHTML = "Correct";
@@ -242,6 +279,7 @@ <h3>Breakdown of Individual Questions</h3>
                             }
                         } else if (input[i][2] == "Evaluation") {
                             evaluation += 1;
+                            document.getElementById(skillset).style.color = "DarkTurquoise";
                             if (input[i][3] == 1) {
                                 evaluationcorrect += 1;
                                 document.getElementById(heading).innerHTML = "Correct";
@@ -249,6 +287,7 @@ <h3>Breakdown of Individual Questions</h3>
                             }
                         } else if (input[i][2] == "Inference") {
                             inference += 1;
+                            document.getElementById(skillset).style.color = "ForestGreen";
                             if (input[i][3] == 1) {
                                 inferencecorrect += 1;
                                 document.getElementById(heading).innerHTML = "Correct";
@@ -256,6 +295,7 @@ <h3>Breakdown of Individual Questions</h3>
                             }
                         } else if (input[i][2] == "Application") {
                             application += 1;
+                            document.getElementById(skillset).style.color = "DarkSlateGrey";
                             if (input[i][3] == 1) {
                                 applicationcorrect += 1;
                                 document.getElementById(heading).innerHTML = "Correct";
@@ -265,30 +305,35 @@ <h3>Breakdown of Individual Questions</h3>
 
                         if (input[i][1] >= 1 && input[i][1] < 2) {
                             level1 += 1;
+                            document.getElementById(difficulty).style.color = "Crimson";
                             if (input[i][3] == 1) {
                                 score += 1;
                                 level1correct += 1;
                             }
                         } else if (input[i][1] >= 2 && input[i][1] < 3) {
                             level2 += 1;
+                            document.getElementById(difficulty).style.color = "Magenta";
                             if (input[i][3] == 1) {
                                 score += 1;
                                 level2correct += 1;
                             }
                         } else if (input[i][1] >= 3 && input[i][1] < 4) {
                             level3 += 1;
+                            document.getElementById(difficulty).style.color = "DarkOrchid";
                             if (input[i][3] == 1) {
                                 score += 1;
                                 level3correct += 1;
                             }
                         } else if (input[i][1] >= 4 && input[i][1] < 5) {
                             level4 += 1;
+                            document.getElementById(difficulty).style.color = "DeepSkyBlue";
                             if (input[i][3] == 1) {
                                 score += 1;
                                 level4correct += 1;
                             }
                         } else if (input[i][1] == 5) {
                             level5 += 1;
+                            document.getElementById(difficulty).style.color = "Gold";
                             if (input[i][3] == 1) {
                                 score += 1;
                                 level5correct += 1;
@@ -306,8 +351,7 @@ <h3>Breakdown of Individual Questions</h3>
             var percentagecorrect = totalcorrect/total;
             
             document.getElementById("score").innerHTML = "Score: " + totalcorrect + "/" + total;
-
-            document.getElementById("skillrating").innerHTML = "Skill Rating: " + localStorage.getItem("currentAverage") + "/5";
+            document.getElementById("no_of_questions").innerHTML = total + " Questions";
 
             // Load google charts
             google.charts.load('current', {'packages':['corechart']});
@@ -428,7 +472,7 @@ <h3>Breakdown of Individual Questions</h3>
                 ['Level 2+',   {v: level2,   f: String(level2)},  {v: level2correct, f: String(level2correct)}, {v: (Math.round(((level2correct/level2) + Number.EPSILON) * 100)), f: level2correctstr}],
                 ['Level 3+', {v: level3, f: String(level3)}, {v: level3correct, f: String(level3correct)}, {v: (Math.round(((level3correct/level3) + Number.EPSILON) * 100)), f: level3correctstr}],
                 ['Level 4+',   {v: level4,  f: String(level4)},  {v: level4correct,  f: String(level4correct)}, {v: (Math.round(((level4correct/level4) + Number.EPSILON) * 100)), f: level4correctstr}],
-                ['Level 5+',   {v: level5,  f: String(level5)},  {v: level5correct,  f: String(level5correct)}, {v: (Math.round(((level5correct/level5) + Number.EPSILON) * 100)), f: level5correctstr}],
+                ['Level 5',   {v: level5,  f: String(level5)},  {v: level5correct,  f: String(level5correct)}, {v: (Math.round(((level5correct/level5) + Number.EPSILON) * 100)), f: level5correctstr}],
                 ['Total',   {v: total,  f: String(total)},  {v: totalcorrect,  f: String(totalcorrect)}, {v: (Math.round(((totalcorrect/total) + Number.EPSILON) * 100)), f: String((Math.round(((totalcorrect/total) + Number.EPSILON) * 100)) + '%')}],
                 ]);
 
@@ -444,7 +488,7 @@ <h3>Breakdown of Individual Questions</h3>
         .catch((err) => {
             console.error('There has been a problem with your fetch operation:' + err);
     })
-
+    
     fetch('http://awsbino-env-2.eba-vh6jpy5i.us-east-1.elasticbeanstalk.com/clear');
     </script>
 
diff --git a/quiz.css b/quiz.css
index 8acf269..176b44c 100644
--- a/quiz.css
+++ b/quiz.css
@@ -147,7 +147,7 @@ html, body {
     font-style: normal;
     font-weight: bold;
     margin-top: 20px;
-    font-size: 35px;
+    font-size: 40px;
     color: orange;
 }
 
@@ -157,10 +157,14 @@ html, body {
     font-family: Helvetica Neue;
     font-style: normal;
     font-weight: bold;
-    font-size: 25px;
+    font-size: 30px;
     color: rgba(0,0,0,1);
 }
 
+#sidebarquiz {
+    font-weight: bold;
+}
+
 #nextbutton {
     position: relative;
     margin-top: 40px;
@@ -186,17 +190,19 @@ html, body {
 }
 
 .progress {
+    margin-top: 10px;
     position: relative;
-    top: 120px;
-    left: 750px;
-    -webkit-transform-origin: 0 100%;
+    /* top: 120px; */
+    left: auto;
+    width: auto;
+    /* -webkit-transform-origin: 0 100%;
     -webkit-transform: rotate(90deg);
     -moz-transform-origin: 0 100%;
     -moz-transform: rotate(90deg);
     -ms-transform-origin: 0 100%;
     -ms-transform: rotate(90deg);
     transform-origin: 0 100%;
-    transform: rotate(90deg);  
+    transform: rotate(90deg);   */
 
 }
 
diff --git a/quizpage.html b/quizpage.html
index 3f32254..9ed0870 100644
--- a/quizpage.html
+++ b/quizpage.html
@@ -31,12 +31,12 @@
                 <g>
                     <rect rx="25" ry="25" width = "250" height = "260" fill="white"></rect>
                     <text class="sidenavweek" x="40" y="35" fill="Orange">Week 0</text>
-                    <line x1="50" y1="50" x2="50" y2="240" stroke-linecap="round" d="M5 40 l215 0" style="stroke:rgba(249, 220, 215, 1); stroke-width:3" />
-                    <line x1="50" y1="50" x2="50" y2="200" stroke-linecap="round" d="M5 40 l215 0" style="stroke:orange; stroke-width:3" />
+                    <line x1="50" y1="50" x2="50" y2="235" stroke-linecap="round" d="M5 40 l215 0" style="stroke:rgba(249, 220, 215, 1); stroke-width:4" />
+                    <line x1="50" y1="50" x2="50" y2="200" stroke-linecap="round" d="M5 40 l215 0" style="stroke:orange; stroke-width:4" />
                     <text class="sidenavweek2" x="70" y="85">Lecture 1</text>
                     <text class="sidenavweek2" x="70" y="135">Lecture 2</text>
                     <text class="sidenavweek2" x="70" y="185">Lecture 3</text>
-                    <text class="sidenavweek2" x="70" y="235">Quiz</text>
+                    <text id="sidebarquiz" class="sidenavweek2" x="70" y="235">Quiz</text>
                     <text class="sidenavweek" x="40" y="300" fill = "Grey">Week 1</text>
                     <text class="sidenavweek" x="40" y="350" fill = "Grey">Week 2</text>
                     <text class="sidenavweek" x="40" y="400" fill = "Grey">Week 3</text>
@@ -50,12 +50,13 @@
     
     <div id="main_section" class="col-6 offset-3">
         <div id="quiz_content" class="container">
-          <div class="progress" style="height: 10px">
-            <div id="progressbarr" class="progress-bar bg-warning" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
+          
           
             <div id = "quiz_text">Alkanes (C1003)</div>
             <div id = "quiz_text2">25 Questions | 30 Minutes</div>
+            <div class="progress" style="height: 10px">
+              <div id="progressbarr" class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
             <hr>
             <div id = "quiz_options">
               <p id="demo"></p>
@@ -249,6 +250,13 @@
         const jsonStr = JSON.stringify(questionsToBe)
         const obj = JSON.parse(jsonStr)
 
+        if (isFinalCalc > 1) {
+          currentAverage = obj.currentAverage
+          currentLower = obj.currentLower
+          currentUpper = obj.currentUpper
+        }
+        
+
         if (isFinalCalc <= 5) {
           const obj2 = JSON.parse(obj.data)
           // console.log(obj.id_of_qn)
@@ -269,9 +277,6 @@
           if (isFinalCalc > 1) {
             list1 = Object.values(list)
             // console.log(typeof list1)
-            currentAverage = obj.currentAverage
-            currentLower = obj.currentLower
-            currentUpper = obj.currentUpper
           }
 
           if (obj.currentAverage < 1.9) {
@@ -311,6 +316,8 @@
               }
             }
 
+            
+
             // console.log(list1)
             // console.log(array)
             for (let i=0; i < array.length; i++) {
@@ -319,6 +326,13 @@
                   filteredArray.push(array[i])
                 }
             }
+
+            if (filteredArray.length < 5) {
+              filteredArray.push(array[21])
+              filteredArray.push(array[16])
+              filteredArray.push(array[20])
+            }
+            // console.log(filteredArray.length)
             // console.log(filteredArray)
           
         }
@@ -337,12 +351,12 @@
         console.log("<---SUBSECTION--->")
         
         console.log("currentLower: " + currentLower)
-        console.log("currentAverage: " + ((currentUpper + currentLower) / 2).toFixed(3))
+        console.log("currentAverage: " + currentAverage)
         console.log("currentUpper: " + currentUpper)
       
 
         if (isFinalCalc == 6) {
-            localStorage.setItem("currentAverage", ((currentUpper + currentLower) / 2).toFixed(3))
+            localStorage.setItem("currentAverage", currentAverage)
             window.open('./performance_report.html')
             return
           }