diff --git a/css/styles.css b/css/styles.css
index c67e454e..475f4a90 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -35,7 +35,7 @@
     font-size: x-large;
     font-weight: bold;
     padding-top: 5px;
-      line-height: 1;
+    line-height: 1;
     padding-left: 5px;
     margin: 5px 0px 5px 0px;
 }
@@ -135,10 +135,12 @@
         transform: scale(0, 0);
         opacity: 1;
     }
+
     20% {
         transform: scale(25, 25);
         opacity: 1;
     }
+
     100% {
         opacity: 0;
         transform: scale(40, 40);
@@ -162,7 +164,8 @@
     left: 50%;
     bottom: 30px;
 }
-.descriptionli{
+
+.descriptionli {
     padding: 0px 5px 5px 5px;
 }
 
@@ -172,11 +175,14 @@
     animation: fadein 0.5s, fadeout 0.5s 2.5s;
 }
 
+#semesters {}
+
 @-webkit-keyframes fadein {
     from {
         bottom: 0;
         opacity: 0;
     }
+
     to {
         bottom: 30px;
         opacity: 1;
@@ -188,6 +194,7 @@
         bottom: 0;
         opacity: 0;
     }
+
     to {
         bottom: 30px;
         opacity: 1;
@@ -199,6 +206,7 @@
         bottom: 30px;
         opacity: 1;
     }
+
     to {
         bottom: 0;
         opacity: 0;
@@ -210,6 +218,7 @@
         bottom: 30px;
         opacity: 1;
     }
+
     to {
         bottom: 0;
         opacity: 0;
diff --git a/js/content.js b/js/content.js
index d4a484f3..550e045e 100644
--- a/js/content.js
+++ b/js/content.js
@@ -108,6 +108,11 @@ $(function () {
 			window.open(textbookLink);
 		}, butdelay);
 	});
+	$("#semesters").on('change', function () {
+		var sem = $(this).val();
+		sem = sem == "Aggregate" ? undefined : sem;
+		getDistribution(sem);
+	});
 	$(document).keydown(function (e) {
 		/*Close Modal when hit escape*/
 		if (e.keyCode == 27) {
@@ -341,15 +346,33 @@ function convertTime(time) {
 }
 
 /*Query the grades database*/
-function getDistribution() {
-	var query = "select * from agg";
+function getDistribution(sem) {
+	var query;
+	if (!sem) {
+		query = "select * from agg";
+	} else {
+		query = "select * from grades";
+	}
 	query += " where dept like '%" + department + "%'";
 	query += " and prof like '%" + profname.replace(/'/g, "") + "%'";
 	query += " and course_nbr like '%" + course_nbr + "%'";
+	if (sem) {
+		query += "and sem like '%" + sem + "%'";
+	}
 	query += "order by a1+a2+a3+b1+b2+b3+c1+c2+c3+d1+d2+d3+f desc";
 	var res = grades.exec(query)[0];
 	var output = "";
-	openDialog(department, coursename, "aggregate", profname, res);
+	if (!sem) {
+		openDialog(department, coursename, "aggregate", profname, res);
+	} else {
+		var data;
+		if (typeof res == 'undefined' || profname == "") {
+			data = [];
+		} else {
+			data = res.values[0];
+		}
+		setChart(data);
+	}
 }
 
 /*Open the modal and show all the data*/
@@ -375,10 +398,10 @@ function openDialog(dep, cls, sem, professor, res) {
 		data = [];
 		$("#semesters").append("<option>No Data</option>")
 	} else {
-		var semesters = res.values[0][18].split(",");
+		var semesters = res.values[0][18].split(",").reverse();
 		semesters.unshift('Aggregate');
 		for (var i = 0; i < semesters.length; i++) {
-			$("#semesters").append(`<option>${semesters[i]}</option>`)
+			$("#semesters").append(`<option value="${semesters[i]}">${semesters[i]}</option>`)
 		}
 		data = res.values[0];
 	}
@@ -412,6 +435,19 @@ function openDialog(dep, cls, sem, professor, res) {
 		$("#myModal").fadeOut(200);
 		$("#snackbar").attr("class", "");
 	}
+
+	setChart(data);
+	// When clicks anywhere outside of the modal, close it
+	window.onclick = function (event) {
+		if (event.target == modal) {
+			$("#myModal").fadeOut(fadetime);
+			$("#snackbar").attr("class", "");
+		}
+	}
+}
+
+
+function setChart(data) {
 	//set up the chart
 	chart = Highcharts.chart('chart', {
 		chart: {
@@ -534,13 +570,7 @@ function openDialog(dep, cls, sem, professor, res) {
 			});
 		}
 
-	}); // When clicks anywhere outside of the modal, close it
-	window.onclick = function (event) {
-		if (event.target == modal) {
-			$("#myModal").fadeOut(fadetime);
-			$("#snackbar").attr("class", "");
-		}
-	}
+	});
 }
 
 /*Format the title*/