diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
index d4a2627..32f2386 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -238,20 +238,45 @@ input {
 
 #classListHolder {
 	max-height: 48%;
-	width: 90%;
+	width: 100%;
 	margin-bottom: 30%;
-	padding: 8%;
 	padding-right: 50%;
 
-	display: none;
 	position: absolute;
 	overflow-y: auto;
-	opacity: 0;
+}
 
-	-webkit-transition: opacity 0.4s ease;  
-	-moz-transition: opacity 0.4s ease; 
-	-ms-transition: opacity 0.4s ease;
-	transition: opacity 0.4s ease;
+#classListHolder h3 {
+	font-weight: 200;
+	margin: 5%;
+}
+
+.sideClass {
+	width: 100%;
+	height: 10%;
+	padding: 5%;
+
+	background-color: rgba(255,255,255,0.1);
+
+	-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; 
+}
+
+.sideClass:hover {
+	background-color: rgba(255,255,255,0.3);
+}
+
+.sideClassName {
+	font-weight: 600;
+	margin: 0;
+}
+
+.sideClassHour {
+	font-weight: 400;
+	color: #444;
+	margin: 0;
 }
 
 .overlay {
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index c014bb9..52c299f 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -30,21 +30,24 @@
             </div>
         </div>
         <div id="classListHolder">
-            
+        <h3>Enrolled</h3>
+            {{#each myclasses}}
+                {{> sidebarClasses}}  
+            {{/each}}
         </div>
     </div>
     <div id="optionsContainer" style="margin-right:{{optionsStatus}};background-color:{{divColor 'sidebar'}}">
     </div>
     <img id="bg" src={{bgSrc}}>
     <div id="mainBody">
-    {{#if currMode 'classes'}}
-    {{/if}}
-    {{#if currMode 'calendar'}}
-    <div id="calbg" style="{{calbg}}"></div>
-        <div id="calendar" style="{{calCenter}}">
-            {{> fullcalendar calendarOptions id="fullcalendar"}}
-        </div>
-    {{/if}}
+        {{#if currMode 'classes'}}
+        {{/if}}
+        {{#if currMode 'calendar'}}
+        <div id="calbg" style="{{calbg}}"></div>
+            <div id="calendar" style="{{calCenter}}">
+                {{> fullcalendar calendarOptions id="fullcalendar"}}
+            </div>
+        {{/if}}
     </div>
     <div class="overlay">
         <div class="overlayCont" style="{{overlayDim}};">
@@ -53,4 +56,11 @@
             <i class="fa fa-times-circle-o" aria-hidden="true"></i>
         </div>
     </div>
+</template>
+
+<template name="sidebarClasses">
+    <div class="sideClass">
+        <p class="sideClassName">{{name}}</p>
+        <p class="sideClassHour">{{hour}}</p>
+    </div>
 </template>
\ No newline at end of file
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 1d89c97..71377c2 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -139,6 +139,18 @@ Template.main.helpers({
         var width = window.innerWidth * 0.865;
         var height = window.innerHeight * 0.76;
         return "width:" + width.toString() + "px;height:" + height.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;margin-top:" + (0.47 * window.innerHeight - 0.5 * height).toString() + "px";
+    },
+    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;
+    	}
     }
 });
 
diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css
index 98365ab..dd19723 100644
--- a/hourglass/client/profile/profile.css
+++ b/hourglass/client/profile/profile.css
@@ -192,6 +192,10 @@
 	padding: 1%;
 }
 
+.profFunction h4 {
+	font-size: 120%;
+}
+
 #searchBar {
 	display: inline;
 }