diff --git a/background.js b/background.js
index 467751ee..b99c502e 100644
--- a/background.js
+++ b/background.js
@@ -7,12 +7,15 @@ chrome.runtime.onMessage.addListener(function(request, sender, response) {
 			remove(request,sender,response);
 		}
 	}
-	if(request.command == "checkConflicts"){
+	else if(request.command == "checkConflicts"){
 		//Check conflicts 
 	}
 	else if(request.command == "alreadyContains"){
 		alreadyContains(request.unique,response);
 	}
+	else if(request.command == "getCourses"){
+		getCourses(response);
+	}
 	else{
 		const xhr = new XMLHttpRequest();
 		const method = request.method ? request.method.toUpperCase() : "GET";
@@ -34,6 +37,13 @@ chrome.runtime.onMessage.addListener(function(request, sender, response) {
     });
 });
 
+
+function getCourses(sendResponse){
+	chrome.storage.sync.get('savedCourses', function(data) {
+		sendResponse({done:data.savedCourses});
+	});
+}
+
 function add(request, sender, sendResponse) {
 	var courses;
 	var response;
diff --git a/content.js b/content.js
index ceabc20f..16ee6c20 100644
--- a/content.js
+++ b/content.js
@@ -23,9 +23,8 @@ $(document).ready( function() {
 	loadDataBase();
 	//make heading and modal
 	$("table thead th:last-child").after('<th scope=col>Plus</th>');
-	var modhtml = '<div class=modal id=myModal><div class=modal-content><span class=close>×</span><div class=card><div class=cardcontainer><h2 class=title>Computer Fluency (C S 302)</h2><h2 class=profname>with Bruce Porter</h2><div class=topbuttons><button class=matbut id="rateMyProf" style="background: #4CAF50;"> RMP </button><button class=matbut id="eCIS" style="background: #CDDC39;"> eCIS </button><button class=matbut id="Syllabi"> Past Syllabi </button><button class=matbut id="saveCourse" style="background: #F44336;"> Save Course +</button></div></div></div><div class=card><div class=cardcontainer><ul class=description style="list-style-type:disc"></ul></div></div><div class=card><div class=cardcontainer><div id=chart></div></div></div></div>'
+	var modhtml = '<div class=modal id=myModal><div class=modal-content><span class=close>×</span><div class=card><div class=cardcontainer><h2 class=title>Computer Fluency (C S 302)</h2><h2 class=profname>with Bruce Porter</h2><div class=topbuttons><button class=matbut id="rateMyProf" style="background: #4CAF50;"> RMP </button><button class=matbut id="eCIS" style="background: #CDDC39;"> eCIS </button><button class=matbut id="Syllabi"> Past Syllabi </button><button class=matbut id="saveCourse" style="background: #F44336;"> Save Course +</button></div></div></div><div class=card><div class=cardcontainer style=""><ul class=description style="list-style-type:disc"></ul></div></div><div class=card><div class=cardcontainer><div id=chart></div></div></div></div>'
 	$("#container").prepend(modhtml);
-
 	$('table').find('tr').each(function(){
 	    if(!($(this).find('td').hasClass("course_header")) && $(this).has('th').length == 0){
 	    	//if a course row, then add the extension button and do something if that course has been "saved"
diff --git a/popup.html b/popup.html
index 1ee153b1..dcbf4956 100644
--- a/popup.html
+++ b/popup.html
@@ -1,16 +1,37 @@
-  <!DOCTYPE html>
-  <html>
-    <head>
-      <style>
-        button {
-          height: 30px;
-          width: 30px;
-          outline: none;
-        }
-      </style>
-    </head>
-    <body>
-      <button id="changeColor"></button>
-      <script src="popup.js"></script>
-    </body>
-  </html>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+.card {
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
+    transition: 0.3s;
+    margin:5px;
+}
+
+.card:hover {
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
+}
+
+.container {
+    padding: 2px 16px;
+}
+h2 {
+  padding-left: 5px;
+}
+li {
+      width: 350px;
+
+}
+body{
+  min-width: 350px;
+}
+</style>
+</head>
+<body>
+<script src="jquery-3.3.1.min.js"></script>
+<script src="popup.js"></script>
+<h2>Saved Courses</h2>
+    <ul id= "courseList" style="list-style-type: none;padding: 5px;"></ul>
+</body>
+</html> 
diff --git a/popup.js b/popup.js
index e3f3884e..8c4e6155 100644
--- a/popup.js
+++ b/popup.js
@@ -1,6 +1,34 @@
-  let changeColor = document.getElementById('changeColor');
+chrome.storage.sync.get('savedCourses', function(data) {
+		var courses = data.savedCourses;
+		console.log(courses);
+		for(var i = 0; i<courses.length;i++){
+			var color;
+			status = courses[i].status;
+			if(status.includes("open")){
+				color = "#4CAF50";
+			}
+			else if(status.includes("waitlisted")){
+				color = "#FF9800"
+			}
+			else if(status.includes("closed") || status.includes("cancelled")){
+				color = "#F44336";
+			}
+			var listhtml = "<li style='padding: 0px 5px 5px 5px; overflow-y: auto;max-height:400px;'> <div style='display:-webkit-inline-box;'><h2 style='padding:5px; font-size:medium;'>"+courses[i].unique+"</h2><div class='card'><div class='container' style='background:"+color+"''><h4 style='color:white'><b>"+courses[i].coursename+"</b></h4> </div></div><div> </li>";
+			$("#courseList").append(listhtml);
 
-  chrome.storage.sync.get('color', function(data) {
-    changeColor.style.backgroundColor = data.color;
-    changeColor.setAttribute('value', data.color);
-  });	
\ No newline at end of file
+		}
+});
+
+$(document).keydown(function(e) { 
+    	if (e.keyCode == 67) { 
+        	clear();
+    	} 
+	});
+function clear(){
+	chrome.storage.sync.set({savedCourses: []});
+	console.log("cleared");
+	$("#courseList").fadeOut(300);	
+}
+function update(){
+
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index e6e7b12b..b164a3bb 100644
--- a/styles.css
+++ b/styles.css
@@ -49,7 +49,7 @@
 
 .profname {
     margin-left: 5px;
-    padding-bottom: 0px;
+    padding-bottom: 5px;
     font-size: medium;
     margin-top: 10px;
 }
@@ -69,14 +69,14 @@
 
 .card {
     /* Add shadows to create the "card" effect */
-    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
     margin-bottom: 10px;
+    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
 }
 
 /* On mouse-over, add a deeper shadow */
 .card:hover {
-    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+    box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)
 }
 
 /* Add some padding inside the card container */
diff --git a/todo b/todo
index 57d71d45..5ffbc8c0 100644
--- a/todo
+++ b/todo
@@ -1,14 +1,14 @@
 TODO:
 - undefined prof, show all possible profs from past?
 		DIFFERENT IF NO PROF
-- popup.html
 - Online classes/no location
 - Schedule Conflicts
-- fix close button 
 - save image of modal?
 - Degree plan?
 - underline Courses maybe? click to go to using the planner link thing
 - when almost everything is blank: M 379H as example
+- schedule generator
+- FIX POP UP CARD NOT FILLING FULL LENGTH
 CLEAN UP:
 Everything lmao 
 
@@ -35,3 +35,4 @@ FIXED/DONE since 7/7/18:
 - maybe modal animations? 
 - Saving courses
 - waitlist/closed/open colors
+- popup.html
