diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css
index dd19723..c521be7 100644
--- a/hourglass/client/profile/profile.css
+++ b/hourglass/client/profile/profile.css
@@ -20,7 +20,7 @@
 	font-weight: 400;
 	margin: 0;
 	margin-bottom: 1%;
-	margin-right: 10%;
+	margin-right: 30%;
 }
 
 .profHea {
@@ -200,7 +200,7 @@
 	display: inline;
 }
 
-#profClassSearch {
+#profClassSearch, .userAddInput {
 	font-size: 125%;
 	width: 30%;
 	margin-top: 3%;
@@ -274,6 +274,19 @@
 	background-color: rgba(0,0,0,0.1);
 }
 
+.owned {
+	background-color: #27646D;
+
+	-webkit-transition: background-color 0.4s ease;  
+	-moz-transition: background-color 0.4s ease; 
+	-ms-transition: background-color 0.4s ease;
+	transition: background-color 0.4s ease;
+}
+
+.owned:hover {
+	background-color: #52848B;
+}
+
 .classText {
 	margin-left: .5%;
 	margin-right: 10%;
@@ -311,17 +324,17 @@
 	margin-right: 5% !important;
 	margin-bottom: 0 !important;
 	position: relative;
-	
+	overflow: hidden !important;
 }
 
-#create div {
+#formContainer div {
 	margin: 3% 6% 5% 6%;
+	width: 35%;
 	display: inline-block;
 }
 
 .creInput {
 	font-size: 120%;
-	width: 100%;
 	padding: 3%;
 }
 
@@ -330,7 +343,8 @@
 }
 
 .-autocomplete-container {
-	margin: 0.5% 0 0 0 !important;
+	margin: 0 0 0 0 !important;
+	position: absolute;
 	display: none;
 }
 
@@ -362,24 +376,7 @@
 	color: #999 !important;
 }
 
-#save {
-	font-size: 90%;
-	background-color: #CC4444;
-
-	box-shadow: -1px 2px 5px 1px #333;
-
-	position: absolute;
-	top: 0;
-	right: 10%;
-	z-index: 50;
-
-	-webkit-transition: transform 0.2s ease, background-color 0.1s ease;  
-	-moz-transition: transform 0.2s ease, background-color 0.1s ease; 
-	-ms-transition: transform 0.2s ease, background-color 0.1s ease;
-	transition: transform 0.2s ease, background-color 0.1s ease;
-}
-
-#save:hover, #mainpage:hover {
+#mainpage:hover {
 	-webkit-transform: scale(1.05);
     -moz-transform: scale(1.05);
     -ms-transform: scale(1.05);
@@ -387,11 +384,7 @@
     transform: scale(1.05);
 }
 
-#save:active {
-	background-color: #34CB34;
-}
-
-#save h2, #mainpage h2 {
+#mainpage h2 {
 	font-weight: 200;
 	width: 100%;
 	padding: 8%;
@@ -421,3 +414,20 @@
 	background-color: #56708D;
 }
 
+#createdClasses {
+	width: 25%;
+	margin-right: -80%;
+	padding: 3%;
+
+	border-top: 5px solid #2E4F74;
+	box-shadow: -1px 2px 5px 1px #444;
+
+	position: absolute;
+	top: 30%;
+	right: 0;
+
+	-webkit-transition: margin 0.4s ease;  
+	-moz-transition: margin 0.4s ease; 
+	-ms-transition: margin 0.4s ease;
+	transition: margin 0.4s ease;	
+}
\ No newline at end of file
diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html
index 58c2395..c76aeff 100644
--- a/hourglass/client/profile/profile.html
+++ b/hourglass/client/profile/profile.html
@@ -125,7 +125,7 @@
 						              	</div>
 							        </div>
 						        </div>
-						        <h3 id="creSubmit">Submit Request</h3>
+					        	<h3 id="creSubmit">Submit Request</h3>
 				          	</form> 
 						{{/if}}
 						</div>
@@ -141,10 +141,43 @@
       		<i class="fa fa-times-circle-o" aria-hidden="true"></i>
 	    </div>
   	</div>
+
+  	<div id="createdClasses" style="background-color:{{divColor 'cards'}}">
+  		<h3>{{selectedClass 'name'}}</h3>
+  		<h4>Code: {{selectedClass 'code'}}</h4>
+  		<div id="moderatorCont">
+  			<div class="userAdder">
+  			<h4>Moderators: </h4>
+  			<i class="fa fa-plus" aria-hidden="true"></i>
+			</div>
+  			{{#each selectedClass 'moderators'}}
+  				{{> userDisplay}}
+  			{{/each}}
+  		</div>
+  		<div id="bannedCont">
+  			<div class="userAdder">
+  			<h4>Banned: </h4>
+  			<i class="fa fa-plus" aria-hidden="true"></i>
+			</div>
+  			{{#each selectedClass 'banned'}}
+  				{{> userDisplay}}
+  			{{/each}}
+  		</div>
+  		<div id="blockEditCont">
+  			<div class="userAdder">
+	  			<h4>View only: </h4>
+	  			<i class="fa fa-plus" aria-hidden="true"></i>
+			</div>	
+  			{{#each selectedClass 'blockEdit'}}
+  				{{> userDisplay}}
+  			{{/each}}
+  		</div>
+  		<div id="deleteClass">Delete Class</div>
+  	</div>
 </template>
 
 <template name="classDisplay">
-	<div class="classBox" classid="{{_id}}">
+	<div class="classBox{{box}}" classid="{{_id}}">
 		<span class="name classText">{{name}}</span>
 		<span class="teacher classText">{{teacher}}</span>
 		<span class="hour classText">{{hour}}</span>
@@ -152,6 +185,13 @@
 	</div>
 </template>
 
+<template name="userDisplay">
+	<div class="userBox" userid="{{_id}}">
+		<span class="email">{{email}}</span>
+		<span class="realname">{{name}}</span>
+	</div>
+</template>
+
 <template name="schoollist">
     {{name}}
 </template>
diff --git a/hourglass/client/profile/profile.js b/hourglass/client/profile/profile.js
index 6d111b3..5e4a784 100644
--- a/hourglass/client/profile/profile.js
+++ b/hourglass/client/profile/profile.js
@@ -16,6 +16,8 @@ Session.set("confirm", null);
 Session.set("serverData", null);
 Session.set("autocompleteDivs", null);
 Session.set("confirmText", null);
+Session.set("selectedClass",null); 
+Session.set("adding",null);
 
 var themeColors = {
     "light": {
@@ -95,9 +97,9 @@ Template.profile.helpers({
     avatar() {
         var dim = window.innerWidth * 1600 / 1920 * 0.16;
         if (Meteor.user().profile.avatar !== undefined) {
-            var pic = Meteor.user().profile.avatar;;
+            var pic = Meteor.user().profile.avatar;
         } else {
-            var pic = "Avatars/" + (Math.floor(Math.random() * (11 - 1)) + 1).toString(); + ".png";
+            var pic = "Avatars/" + (Math.floor(Math.random() * (11 - 1)) + 1).toString() + ".png";
             currentprofile = Meteor.user().profile;
             currentprofile.avatar = pic
             Meteor.call("editProfile", currentprofile);
@@ -169,23 +171,14 @@ Template.profile.helpers({
     autocompleteClasses() {
         return Session.get("autocompleteDivs");
     },
-    myclasses() {
-    	if (Meteor.user().profile.classes === undefined || Meteor.user().profile.classes.length === 0) {
-    		return [];
-    	} else {
-    		var array = [];
-    		var courses = Meteor.user().profile.classes;
-    		for(var i = 0; i < courses.length; i++) {
-    			array.push(classes.findOne({_id:courses[i]}));
-    		}
-    		return array;
-    	}
-    },
     notfound() {
         return Session.get("notfound");
     },
     confirmText() {
         return Session.get("confirmText");
+    },
+    selectedClass(val) {
+    	return Session.get("selectedClass")[val];
     }
 });
 
@@ -243,14 +236,14 @@ Template.profile.events({
     'click' (event) {
         var sessval = Session.get("modifying");
         if (event.target.id !== sessval &&
-            event.target.id !== sessval + "a" &&
-            !Session.equals("modifying", null) &&
-            !event.target.parentNode.className.includes("profOptions")) {
+        event.target.id !== sessval + "a" &&
+        !Session.equals("modifying", null) &&
+        !event.target.parentNode.className.includes("profOptions")) {
             closeInput(sessval);
         }
         if (!event.target.className.includes("radio") &&
-            !Session.equals("radioDiv", null) &&
-            !event.target.parentNode.className.includes("profOptions") &&
+        !Session.equals("radioDiv", null) &&
+        !event.target.parentNode.className.includes("profOptions") &&
             event.target.readOnly !== true) {
             var opnum = (parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset"))).toString();
             for (var i = 0; i < document.getElementsByClassName("profOptions").length; i++) {
@@ -261,6 +254,21 @@ Template.profile.events({
             Session.set("radioDiv", null);
             Session.set("radioOffset", null);
         }
+        if(event.target.className !== "userAddInput" && 
+      	Session.get("adding")) {
+      		var inputs = document.getElementsByClassName("userAddInput");
+      		for(var i = 0; i < inputs.length; i++) {
+      			try {
+      				inputs[i].parentNode.removeChild(inputs[i]);
+      			} catch(err) {}
+      		}
+      		Session.set("adding",false);
+      	}
+      	if(!document.getElementById("createdClasses").contains(event.target) &&
+      	Session.get("selectedClass") !== null) {
+      		document.getElementById("createdClasses").style.marginRight = "-40%";
+      		setTimeout(function() { Session.set("selectedClass", null); }, 300);
+      	}
     },
     'keydown' (event) {
         var sessval = Session.get("modifying");
@@ -433,6 +441,38 @@ Template.profile.events({
     },
     'focus .op' (event) {
         event.target.click();
+    },
+    'click .owned' (event) {
+    	if (event.target.id === "label") return;
+        if (!event.target.className.includes("owned")) {
+            var attribute = event.target.parentNode.getAttribute("classid");
+        } else {
+            var attribute = event.target.getAttribute("classid");
+        }
+        var usertype = ["moderators","banned","blockEdit"];
+        var array = classes.findOne({_id:attribute});
+
+        if(array.code === "") array.code = "None";
+        for(var i = 0; i < usertype.length; i++) {
+     		var users = array[usertype[i]];
+        	for(var j = 0; j < users.length; j++) {
+        		var detailusers = {};
+        		var user = Meteor.users.findOne({_id:users[j]});
+        		detailusers._id = user._id;
+        		detailusers.email = user.name + "hi";
+        		detailusers.name = user.name;
+        		array[usertype[i]] = detailusers;
+        	}
+        }
+       	document.getElementById("createdClasses").style.marginRight = "0";
+        Session.set("selectedClass",array);
+    },
+    'click .userAdder .fa-plus' (event) {
+    	if(Session.get("adding")) return;
+    	var input = document.createElement("input");
+    	input.className = "userAddInput";
+    	event.target.parentNode.appendChild(input);
+    	Session.set("adding", true);
     }
 });