diff --git a/css/popup.css b/css/popup.css
index 4507d85b..8fde24d8 100644
--- a/css/popup.css
+++ b/css/popup.css
@@ -26,14 +26,17 @@ body {
 }
 
 .settingsbut {
+    margin-right: 0px;
+    border: 0px
+}
+
+.settings {
     position: absolute;
     bottom: 0;
     right: 0;
     float: right;
     margin-right: 5px;
-    border: 0px
 }
-
 .matbut {
     border: none;
     outline: none;
@@ -88,6 +91,40 @@ body {
     transform-origin: 50% 50%;
 }
 
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+    background-color: #fefefe;
+    margin: auto;
+    max-height: 85%;
+    overflow-y: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 50%;
+}
+
+/* The Close Button */
+
+.close {
+    color: #aaaaaa;
+    float: right;
+    padding: 5px;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+
 @keyframes ripple {
     0% {
         transform: scale(0, 0);
diff --git a/js/popup.js b/js/popup.js
index 6a9ebb8e..56eb7960 100644
--- a/js/popup.js
+++ b/js/popup.js
@@ -1,50 +1,45 @@
 var courses;
 // get the courses from storage
-chrome.storage.sync.get('savedCourses', function (data) {
-	//find, build, and show the messages for the conflicts in the saved courses
-	chrome.runtime.sendMessage({
-		command: "checkConflicts"
-	}, function (response) {
-		var isConflicted = [];
-		if (response.isConflict) {
-			var between = response.between;
-			var text = "";
-			for (var i = 0; i < between.length; i++) {
-				text += "CONFLICT: " + getSimpleName(between[i][0].coursename, between[i][0].unique) + " and " + getSimpleName(between[i][1].coursename, between[i][1].unique);
-				isConflicted.push(between[i][0].unique);
-				isConflicted.push(between[i][1].unique);
-				if (i != between.length - 1) {
-					text += "<br>";
-				}
+
+setCourseList();
+
+	// var modhtml = '<div class=modal id=myModal><div class=modal-content><span class=close>×</span><div class=card><div class=cardcontainer></div></div></div></div>';
+	// $("#html").prepend(modhtml);
+
+function setCourseList(){
+	$("#courseList").empty()
+	chrome.storage.sync.get('savedCourses', function (data) {
+		updateConflicts();
+		courses = data.savedCourses
+		if (courses.length != 0) {
+			$("#empty").hide();
+			$("#courseList").show();
+
+		} else{
+			$("#empty").show();
+		}
+		// build and append the course list element
+		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 = "#FF5722";
 			}
-			$("#courseList").prepend("<p style='font-size:small; font-weight:bold; color:red; margin:5px 5px 5px 10px'>" + text + "</>");
+			var department = courses[i].coursename.substring(0, courses[i].coursename.search(/\d/) - 2);
+			var course_nbr = courses[i].coursename.substring(courses[i].coursename.search(/\d/), courses[i].coursename.indexOf(" ", courses[i].coursename.search(/\d/)));
+			var profname = prettifyName(courses[i].profname);
+			if (profname == "") {
+				profname = "Undecided Professor";
+			}
+			var listhtml = "<li id='" + i + "'style='padding: 0px 5px 5px 5px; overflow-y: auto;max-height:400px;'><div class='card'><div class='container' style='background:" + color + "''><h4 class='truncate' style='color:white;margin:5px; display:inline-block;font-size:large;'><b>" + department + " " + course_nbr + "<span style='font-size:medium'>" + " with </span><span style='font-size:medium'>" + profname + " (" + courses[i].unique + ")" + "</span></b></h4><p id='arrow' style='float:right;font-size:small;display:inline-block;margin-top:10px;color:white;'>&#9658;</p></div></div><div id='moreInfo' style='display: none;'><p style='font-weight:bold;padding:10px;margin:0px 5px 0px 15px;font-size:small;background-color:#FFCDD2;'>" + makeLine(i) + "</p><div id='infoButtons' style='border-radius:0px;'><button class='matbut' id='listRemove'style='float:right;background:#F44336; margin:5px;'>Remove</button><button class='matbut' id='register' style='float:right;background:#4CAF50; margin:5px;'>Register</button><button class='matbut' id='listMoreInfo' style='float:right;background:#2196F3; margin:5px;'>More Info</button></div></div></li>";
+			$("#courseList").append(listhtml);
 		}
 	});
-	courses = data.savedCourses;
-	if (courses.length != 0) {
-		$("#empty").hide();
-	}
-	// build and append the course list element
-	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 = "#FF5722";
-		}
-		var department = courses[i].coursename.substring(0, courses[i].coursename.search(/\d/) - 2);
-		var course_nbr = courses[i].coursename.substring(courses[i].coursename.search(/\d/), courses[i].coursename.indexOf(" ", courses[i].coursename.search(/\d/)));
-		var profname = prettifyName(courses[i].profname);
-		if (profname == "") {
-			profname = "Undecided Professor";
-		}
-		var listhtml = "<li id='" + i + "'style='padding: 0px 5px 5px 5px; overflow-y: auto;max-height:400px;'><div class='card'><div class='container' style='background:" + color + "''><h4 class='truncate' style='color:white;margin:5px; display:inline-block;font-size:large;'><b>" + department + " " + course_nbr + "<span style='font-size:medium'>" + " with </span><span style='font-size:medium'>" + profname + " (" + courses[i].unique + ")" + "</span></b></h4><p id='arrow' style='float:right;font-size:small;display:inline-block;margin-top:10px;color:white;'>&#9658;</p></div></div><div id='moreInfo' style='display: none;'><p style='font-weight:bold;padding:10px;margin:0px 5px 0px 15px;font-size:small;background-color:#FFCDD2;'>" + makeLine(i) + "</p><div id='infoButtons' style='border-radius:0px;'><button class='matbut' id='listRemove'style='float:right;background:#F44336; margin:5px;'>Remove</button><button class='matbut' id='register' style='float:right;background:#4CAF50; margin:5px;'>Register</button><button class='matbut' id='listMoreInfo' style='float:right;background:#2196F3; margin:5px;'>More Info</button></div></div></li>";
-		$("#courseList").append(listhtml);
-	}
-});
+}
 
 /* prettify the name for the conflict messages*/
 function getSimpleName(coursename, unique) {
@@ -84,7 +79,7 @@ function updateConflicts() {
 
 /* Handle the button clicks */
 $(document).ready(function () {
-	$("#courseList li").click(function () {
+	$("#courseList").on('click', 'li', function () {
 		$(this).find("#listMoreInfo").click(function () {
 			window.open(courses[$(this).closest("li").attr("id")].link);
 		});
@@ -153,6 +148,41 @@ $(document).ready(function () {
 			'url': 'https://registrar.utexas.edu/schedules'
 		});
 	});
+
+	$("#impexp").click(function(){
+		if($("#impexp>i").text() == 'close'){
+			$(".settings").find('#import').remove();
+			$(".settings").find('#export').remove();
+			$("#impexp>i").text('import_export');
+		} else{
+			$("#impexp>i").text('close');
+			$(".settings").prepend(`
+		    </button><button title='Import' style="background-color:white;" class="settingsbut" id='import'>
+		      <i style='color:#FF9800' class="material-icons">
+		        arrow_upward
+		      </i>
+		    </button>
+		    <button title='Export' style="background-color:white;" class="settingsbut" id='export'>
+		      <i style='color:#FF9800' class="material-icons">
+		        arrow_downward
+		      </i>
+		    </button>
+		    `);
+		}
+	})
+	$(".settings").on('click', '#import', function () {
+		$("#importOrig").click();
+	});
+	$(".settings").on('click', '#export',function () {
+		chrome.storage.sync.get('savedCourses', function (data) {
+			var exportArray = JSON.stringify(data.savedCourses, null, 4);
+			var exportlink = document.createElement('a');
+			var url = window.URL.createObjectURL(new Blob([exportArray], {type: "octet/stream"}));
+			exportlink.setAttribute('href', url);
+			exportlink.setAttribute('download', 'my_courses.json' );
+			exportlink.click();			
+		});
+	});
 	$("#open").click(function () {
 		chrome.tabs.create({
 			'url': "options.html"
@@ -165,6 +195,46 @@ $(document).ready(function () {
 	});
 });
 
+$("#importOrig").change(function(e){
+	var files = e.target.files;
+	var reader = new FileReader();
+  	reader.onload = function(){
+  		try{
+			var impCourses = JSON.parse(this.result);
+			console.log(impCourses);
+			if(impCourses && impCourses.length && (impCourses.length == 0 || validateObject(impCourses))){
+				chrome.storage.sync.set({
+					savedCourses: impCourses
+				});
+				chrome.tabs.query({}, function (tabs) {
+					for (var i = 0; i < tabs.length; i++) {
+						chrome.tabs.sendMessage(tabs[i].id, {
+							command: "updateCourseList"
+						});
+					}
+				});
+				setCourseList(impCourses);
+			}
+		} catch(err){
+
+		}
+		importOrig.value = ''; //make sure to clear input value after every import
+  	}
+  	reader.readAsText(files[0]);
+}); 
+
+function validateObject(impCourses){
+	for(var i = 0; i<impCourses.length; i++){
+		var course = impCourses[i];
+		var isValid = course["coursename"] && course["datetimearr"] && course["link"] && course["profname"] && course["status"] && course["unique"];
+		console.log(isValid);
+		if(!isValid){
+			return false;
+		}
+	}
+	return true;
+}
+
 /* convert from the dtarr and maek the time lines*/
 function makeLine(index) {
 	var datetimearr = courses[index].datetimearr;
@@ -239,6 +309,7 @@ function clear() {
 			});
 		}
 	});
+	$("#courseList").empty()
 	console.log("cleared");
 	$("#courseList").fadeOut(300, function () {
 		$("#empty").fadeIn(200);
diff --git a/popup.html b/popup.html
index 886241da..ba1cdefd 100644
--- a/popup.html
+++ b/popup.html
@@ -24,10 +24,32 @@
       <span style="font-size: small;display:table;margin:0 auto;font-weight: bold">(No Courses Saved)</span>
     </h2>
     <div style=" margin-bottom: 0px; display:inline-block"></div>
-    <button title='Options' style="background-color:white;" class="settingsbut" id='open'>
+    <input type="file" id="importOrig" accept=".json" style="display:none"/>
+
+    <div class="settings">
+<!--        <button title='Import' style="background-color:white;" class="settingsbut" id='import'>
+      <i style='color:#FF9800' class="material-icons">
+        arrow_upward
+      </i></button>
+      <button title='Export' style="background-color:white;" class="settingsbut" id='export'>
+      <i style='color:#FF9800' class="material-icons">
+        arrow_downward
+      </i>
+    </button> -->
+          <button title='Import/Export' style="background-color:white;" class="settingsbut" id='impexp'>
+      <i style='color:#FF9800' class="material-icons">
+        import_export
+      </i>
+    </button> 
+
+    <button title='Options' style="background-color:white; margin-right: 0px;" class="settingsbut" id='open'>
       <i style='color:#FF9800' class="material-icons">
         settings
       </i></button>
+
+    </div>
+
+
   </div>
 
   <script src="js/jquery-3.3.1.min.js"></script>