diff --git a/hourglass/.meteor/platforms b/hourglass/.meteor/platforms
index efeba1b..0b0ddcc 100644
--- a/hourglass/.meteor/platforms
+++ b/hourglass/.meteor/platforms
@@ -1,2 +1,3 @@
-server
+android
 browser
+server
diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
index 6bfb37f..4245163 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -55,7 +55,7 @@ html {
 
 .formInvalid::-webkit-input-placeholder {
    color: red;
-}s
+}
 
 .formInvalid:-moz-placeholder {
    color: red;  
@@ -135,7 +135,7 @@ body {
 	width: 36vh;
 	z-index: 5;
 }
-a
+
 .noScroll h1,.noScroll h2,.noScroll h3,.noScroll h4,.noScroll h5,
 .gu-mirror h1,.gu-mirror h2,.gu-mirror h3,.gu-mirror h4,.gu-mirror h5 {
 	margin: 0;
@@ -148,7 +148,6 @@ a
 .noScroll h4, .gu-mirror h4 {
 	font-size: 1.9vh;
 	font-weight: 200;
-	padding: 5%;
 
 	display: inline-block;
 
@@ -261,20 +260,9 @@ a
 	margin-top: 6vh;
 }
 
-.sectionTitle {
-	font-weight: 200;
-	font-size: 2vh;
-	width: 100%;
-	padding: 6%;
-	background-color: rgba(255,255,255,0.1);
-}
-
-.sectionTitle h3 {
-	font-size: 2vh;
-}
-
 .mode {
 	width: 100%;
+	height: 6vh;
 	display: table;
 	background-color: rgba(0,0,0,0.1);
 
@@ -308,20 +296,23 @@ a
 
 .mode .fa {
 	width: 10%;
-	padding: 6%;
+	padding: 0 6% 0 6%;
+	line-height: 6vh;
 	display: table-cell;
 }
 
 .mode h4 {
 	width: 74%;
+	line-height: 6vh;
 	display: table-cell;
 }
 
-#divLeftBar .fa-university, #divLeftBar .fa-calendar, #divLeftBar .fa-download, #divLeftBar .fa-tasks {
+#divLeftBar .fa-university, #divLeftBar .fa-calendar, #divLeftBar .fa-download, #divLeftBar .fa-tasks,
+#divLeftBar .fa-graduation-cap, #divLeftBar .fa-book {
 	font-size: 2vh;
 }
 
-.noScroll .fa-plus, .creWork .fa-plus, .fa-minus, .noScroll .fa-graduation-cap, .fa-exchange {
+.noScroll .fa-plus, .creWork .fa-plus, .fa-minus, .fa-exchange {
 	font-size: 130%;
 	padding: 5%;
 }
@@ -364,7 +355,7 @@ a
 }
 
 .sideClass span {
-	font-weight: 400;
+	font-weight: 200;
 	margin: 0;
 	font-size: 1.7vh;
 	padding: 5%;
@@ -407,73 +398,6 @@ a
 	white-space: nowrap;
 }
 
-#filterWrapper {
-	width: 100%;
-}
-
-.openable {
-	font-weight: 200;
-	padding: 0;
-
-	cursor: pointer;
-
-	-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; 
-}
-
-.openable:hover {
-	background-color: rgba(255,255,255,0.2);
-}
-
-.openable h3:first-child {
-	font-weight: 200;
-	padding: 5%;
-	display: inline-block;
-	pointer-events: none;
-}
-
-.openable .fa {
-	padding: 5%;
-	float: right;
-	display: inline-block;
-	pointer-events: none;
-}
-
-#filterHead h3:first-child, #filterWrapper .sectionTitle h3:first-child {
-	font-weight: 200;
-	padding: 5%;
-	display: inline-block;
-	pointer-events: none;
-}
-
-#disableFilter {
-	font-weight: 200;
-	font-size: 90%;
-	margin-left: 10%;
-	padding: 4%;
-	background-color: rgba(255,255,255,0.2);
-
-	display: inline-block;
-	cursor: pointer;
-	pointer-events: all;
-	z-index: 2;
-
-	-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;
-}
-
-#disableFilter:hover {
-	background-color: rgba(0,0,0,0.1);
-}
-
-#filterWrapper {
-	display: none;
-}
-
 .mainClass {
 	width: 100%;
 	padding-bottom: 1%;
@@ -504,10 +428,6 @@ a
 	cursor: pointer;
 }
 
-.sectionTitle.downOffset {
-	margin-top: 6vh;
-}
-
 .mainClassName {
 	font-size: 160%;
 	white-space: normal;
@@ -704,10 +624,14 @@ textarea.clickModify {
 }
 
 .prefText {
-	padding: 4%;
+	height: 5vh;
 	background-color: rgba(255,255,255,0.15);
 }
 
+.prefText h3 {
+	line-height: 5vh;
+}
+
 .noneLeft {
 	color: red;
 }
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index e3eb7ca..b77dbb4 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -52,6 +52,11 @@
                         {{> fullcalendar calendarOptions}}
                     </div>
                 {{/if}}
+
+                {{#if currSettingMode 'manageClass'}}
+                    {{> manageClass}}
+                {{/if}}
+                
             </div>
         </div>
 
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 53f9a4e..43826df 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -302,8 +302,11 @@ Template.main.helpers({
         if (Session.get("requests")) return "0px";
         return openValues.requests;
     },
-    currMode(name) { // Status of display mode.
-        return Session.equals("mode", name);
+    currMode(mode) { // Status of display mode.
+        return Session.equals("mode", mode);
+    },
+    currSettingMode(mode) {
+        return Session.equals("settingMode", mode) && Session.equals("sidebarMode", "option");
     },
     calendarOptions() { // Settings for the calendar, including work displaying.
         return {
@@ -386,9 +389,6 @@ Template.main.helpers({
         var width = window.innerWidth * 0.85;
         return "width:" + width.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;";
     },
-    filterOn() {
-        return Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0;
-    },
     highlight() { // Calendar highlight/scale option.
         var hoverHighlight = Session.get("classDispHover");
         var typeHighlight = Session.get("typeFilterHover");
@@ -456,14 +456,14 @@ Template.main.events({
         }
 
         if (!e.includes("fa-cog") && // Sidebar closing.
-            !e.includes("fa-bars") &&
-            !e.includes("fa-question") &&
-            !document.getElementById("menuContainer").contains(event.target) &&
-            !document.getElementById("menuBar").contains(event.target)) {
-                if(!(e.includes("fc-day") && !e.includes("fc-past"))) {
-                    toggleToSidebar(false);
-                }
-                
+        !e.includes("fa-bars") &&
+        !e.includes("fa-question") &&
+        !document.getElementById("menuContainer").contains(event.target) &&
+        !document.getElementById("menuBar").contains(event.target)) {
+            if(!(e.includes("fc-day") && !e.includes("fc-past")) && 
+            !Session.equals("sidebarMode", "option")) {
+                toggleToSidebar(false);
+            }
         }
 
         if (e === "overlay") { // Overlay closing.
@@ -485,17 +485,6 @@ Template.main.events({
     'click .fa-question' (event) { // Click requests button.
         toggleToSidebar("requests");
     },
-    'click .classes' () { // Click classes mode button.
-        if (Session.equals("mode", "classes")) return;
-        toggleToMode("classes")
-        setTimeout(startDragula, 500);
-        toggleToSidebar(false);
-    },
-    'click .calendar' () { // Click calendar mode button.
-         if (Session.equals("mode", "calendar")) return;
-        toggleToMode("calendar");
-        toggleToSidebar(false);
-    },
     'click .creWork' (event) { // Cick add work button.
         var attr;
         if (event.target.className !== "creWork") {
@@ -742,100 +731,11 @@ Template.main.events({
     'click #markReport' () { // Click report button.
         serverData = [Session.get("currentWork")._id, "reports"];
         sendData("toggleWork");
-    },
-    // CLASS FILTERS
-    'click .sideClass' (event) { // Click class list in sidebar.
-        var div = event.target;
-        while (div.getAttribute("classid") === null) div = div.parentNode;
-        var classid = div.getAttribute("classid");
-
-        if (Session.equals("sidebarMode","create")) { // If creating work from calendar.
-            var newSetting = Session.get("currentWork");
-            newSetting.class = classid;
-            Session.set("currentWork", newSetting);
-            openDivFade(document.getElementsByClassName("overlay")[0]);
-        } else { // Normal clicking turns on filter.
-            var array = Session.get("classDisp");
-            if (array.indexOf(classid) !== -1) {
-                array.splice(array.indexOf(classid), 1);
-            } else {
-                array.push(classid);
-            }
-            Session.set("classDisp", array);
-        }
-    },
-    'click .sideFilter' (event) {
-        var div = event.target;
-        while (div.getAttribute("type") === null) div = div.parentNode;
-        var type = div.getAttribute("type");
-
-        var array = Session.get("typeFilter");
-        if (array.indexOf(type) !== -1) {
-            array.splice(array.indexOf(type), 1);
-        } else {
-            array.push(type);
-        }
-        Session.set("typeFilter", array);
-    },
-    'click #disableFilter' () {
-        Session.set("classDisp", []);
-        Session.set("typeFilter", []);
-    },
-    'mouseover .sideClass' (event) { // Highlight/scale filter on-hover.
-        var div;
-        if (event.target.className !== "sideClass") {
-            div = event.target.parentNode;
-        } else {
-            div = event.target;
-        }
-        while (div.getAttribute("classid") === null) div = div.parentNode;
-        var classid = div.getAttribute("classid");
-        Session.set("classDispHover", classid);
-    },
-    'mouseleave .sideClass' (event) { // Turn off highlight/scale filter on-leave.
-        if (event.target.className !== "sideClass") {
-            var div = event.target.parentNode;
-            if (div.contains(event.target)) return;
-        }
-        Session.set("classDispHover", null);
-    },
-    'mouseover .sideFilter' (event) {
-        var div;
-        if (event.target.className !== "sideFilter") {
-            div = event.target.parentNode;
-        } else {
-            div = event.target;
-        }
-        while (div.getAttribute("type") === null) div = div.parentNode;
-        var type = div.getAttribute("type");
-        Session.set("typeFilterHover", type);
-    },
-    'mouseleave .sideFilter' (event) {
-        if (event.target.className !== "sideFilter") {
-            var div = event.target.parentNode;
-            if (div.contains(event.target)) return;
-        }
-        Session.set("typeFilterHover", null);
     }
 });
 
 // Other Functions
 
-function toggleToSidebar(sidebar) {
-    if(Session.equals("sidebarMode", sidebar) || !sidebar) {
-        $("#menuContainer").hide("slide",  {direction: "left"}, 250);
-        $("#divCenter").stop().animate({left: '6vh'}, 250, function() {
-            Session.set("sidebarMode", "");
-        });
-    } else {
-        $("#menuContainer").show("slide",  {direction: "left"}, 250);
-        $("#divCenter").stop().animate({left: '36vh'}, 250);
-        $(".menuWrapper").fadeOut(200, function() {
-            Session.set("sidebarMode", sidebar);
-        });
-    }
-}
-
 function toggleOptionMenu(toggle, menu) {
     if(toggle) {
         $(".selectedOption").removeClass("selectedOption");
@@ -855,13 +755,32 @@ function toggleOptionMenu(toggle, menu) {
     }
 }
 
+function toggleToSidebar(sidebar) {
+    try {
+        $("#backgroundOverlay").fadeOut(250);
+    } catch(err) {}
+    if(Session.equals("sidebarMode", sidebar) || !sidebar) {
+        $("#menuContainer").hide("slide",  {direction: "left"}, 250);
+        $("#divCenter").stop().animate({left: '6vh'}, 250, function() {
+            Session.set("sidebarMode", "");
+        });
+    } else {
+        $("#menuContainer").show("slide",  {direction: "left"}, 250);
+        $("#divCenter").stop().animate({left: '36vh'}, 250);
+        $(".menuWrapper").fadeOut(200, function() {
+            Session.set("sidebarMode", sidebar);
+        });
+    }
+}
+
 function toggleToMode(mode) {
     $("#mainBody").fadeOut(250, function() {
-        Session.set("mode",mode);
+        (Session.equals("sidebarMode", "option")) ? Session.set("settingMode", mode) : Session.set("mode",mode);
         $("#mainBody").fadeIn(250);
     });
 }
 
+
 function openDivFade(div) {
     div.style.display = "block";
     div.style.opacity = "0";
@@ -905,6 +824,7 @@ function sendData(funcName) { // Call Meteor function, and do actions after func
                 timeout: 2500
             });
         }
+        document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
     });
 }
 
diff --git a/hourglass/client/menus/menus.css b/hourglass/client/menus/menus.css
new file mode 100644
index 0000000..75f8d9d
--- /dev/null
+++ b/hourglass/client/menus/menus.css
@@ -0,0 +1,221 @@
+#filterWrapper {
+	width: 100%;
+}
+
+.sectionTitle {
+	font-weight: 200;
+	font-size: 2vh;
+	width: 100%;
+	height: 6vh;
+	background-color: rgba(255,255,255,0.1);
+}
+
+.sectionTitle h3 {
+	font-weight: 200;
+	font-size: 2vh;
+	padding-left: 6%;
+	line-height: 6vh;
+}
+
+.sectionTitle.downOffset {
+	margin-top: 6vh;
+}
+
+.openable {
+	cursor: pointer;
+
+	-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; 
+}
+
+.openable:hover {
+	background-color: rgba(255,255,255,0.2);
+}
+
+.openable h3:first-child {
+	font-weight: 200;
+	display: inline-block;
+	pointer-events: none;
+}
+
+.openable .fa {
+	padding: 6%;
+	float: right;
+	display: inline-block;
+	pointer-events: none;
+}
+
+#disableFilter {
+	font-weight: 200;
+	font-size: 90%;
+	margin-left: 10%;
+	padding: 4%;
+
+	background-color: rgba(255,255,255,0.2);
+
+	display: inline-block;
+	cursor: pointer;
+	line-height: normal;
+	pointer-events: all;
+	z-index: 2;
+
+	-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;
+}
+
+#disableFilter:hover {
+	background-color: rgba(0,0,0,0.1);
+}
+
+#filterWrapper {
+	display: none;
+}
+
+#backgroundOverlay {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+}
+
+#colLeft, #colRight {
+	height: 100%;
+	display: inline-block;
+}
+
+#colLeft h2, #colRight h2 {
+	padding: 3% 3% 0 4%;
+	font-size: 4vh;
+	font-weight: 300;
+}
+
+#colLeft p, #colRight p {
+	font-size: 2vh;
+	margin: 0;
+	padding: 0 2% 0 7%;
+}
+
+#colLeft {
+	width: 59%;
+}
+
+#colRight {
+	border-left: 1px solid #666;
+	float: right;
+	width: 40%;
+	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.2);
+}
+
+#settingClassWrapper {
+	width: 90%;
+	padding: 2% 0 0 3%;
+}
+
+#label {
+	background-color: rgba(0,0,0,0.2);
+	box-shadow: none;
+	border: none;
+
+	display: table;
+	cursor: default;
+}
+
+.classBox {
+	font-size: 1.3vw;
+	width: 100%;
+	margin-bottom: 3%;
+	padding: 2%;
+
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+
+	display: table;
+	table-layout: fixed;
+	cursor: pointer;
+
+	-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;
+}
+
+.classBox:hover {
+	background-color: rgba(0,0,0,0.3);
+}
+
+.owned {
+	box-shadow: inset 0 0 0 99999px rgba(255,255,255,0.3);
+	-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: rgba(0,0,0,0.3);
+}
+
+.classText {
+	margin-left: .5%;
+	margin-right: 10%;
+	display: table-cell;
+	text-align: left;
+}
+
+.classBox .fa-times {
+	display: table-cell;
+	width: 5%;
+}
+
+.name {
+	width: 40%;
+}
+
+.hour.classText, .subscribers.classText {
+	text-align: center;
+}
+
+.settingHeader div:first-child {
+	width: 60%;
+	display: inline-block;
+}
+
+.settingHeader div:last-child {
+	float: right;
+	margin: 2% 1% 1% 1%;
+	vertical-align: bottom;
+	display: inline-block;
+}
+
+#colRight .settingHeader div:last-child {
+	margin-top: 1%;
+}
+
+#colRight .settingHeader {
+	padding: 2% 2% 2% 3%;
+}
+
+.circleIcon {
+	width: 6vh;
+	height: 6vh;
+
+	background-color: rgba(0,0,0,0.2);
+	-moz-border-radius: 50%;
+	-webkit-border-radius: 50%;
+	border-radius: 50%;	
+}
+
+.circleIcon .fa {
+	font-size: 2.5vh;
+	margin-top: 0.25vh;
+	width: 6vh;
+	height: 6vh;
+	line-height: 6vh;
+	text-align: center;
+}
+
diff --git a/hourglass/client/menus/menus.html b/hourglass/client/menus/menus.html
index 79a30e1..16369c1 100644
--- a/hourglass/client/menus/menus.html
+++ b/hourglass/client/menus/menus.html
@@ -1,49 +1,42 @@
 <template name="sidebarMenuPlate">
-    <div id="modes">
-        <h3 class="sectionTitle">Main</h3>
-        <div class="mode classes">
-            <div class="status" style="background-color:{{modeStatus 'classes'}}"></div>
-            <i class="fa fa-university" aria-hidden="true"></i>
-            <h4>Classes</h4>
-        </div>
-        <div class="mode calendar">
-            <div class="status" style="background-color:{{modeStatus 'calendar'}}"></div>
-            <i class="fa fa-calendar" aria-hidden="true"></i>
-            <h4>Calendar</h4>
-        </div>
-        <div class="mode manageClass" onclick="window.location='/profile'">
-            <div class="status"></div>
-            <i class="fa fa-tasks" aria-hidden="true"></i>
-            <h4>Manage Classes</h4>
-        </div>
+    <div class="sectionTitle downOffset">
+        <h3>Main</h3>
     </div>
-    <div id="filters">
-        <div id="filterHead" class="sectionTitle openable">
-            <h3>Filters</h3>
-            {{#if filterOn}}
-                <h3 id="disableFilter">Disable All</h3>
-            {{/if}}
+    <div class="mode classes">
+        <div class="status" style="background-color:{{modeStatus 'classes'}}"></div>
+        <i class="fa fa-university" aria-hidden="true"></i>
+        <h4>Classes</h4>
+    </div>
+    <div class="mode calendar">
+        <div class="status" style="background-color:{{modeStatus 'calendar'}}"></div>
+        <i class="fa fa-calendar" aria-hidden="true"></i>
+        <h4>Calendar</h4>
+    </div>
+    <div id="filterHead" class="sectionTitle openable">
+        <h3>Filters</h3>
+        {{#if filterOn}}
+            <h3 id="disableFilter">Disable All</h3>
+        {{/if}}
+        <i class="fa fa-angle-down" aria-hidden="true"></i>
+    </div>
+    <div id="filterWrapper">
+        <div id="typeFilterWrapper" class="sectionTitle openable">
+            <h3>By Type</h3>
             <i class="fa fa-angle-down" aria-hidden="true"></i>
         </div>
-        <div id="filterWrapper">
-            <div id="typeFilterWrapper" class="sectionTitle openable">
-                <h3>By Type</h3>
+        <div id="classFilterHolder">
+            {{#each types}}
+                {{> sideTypeFilter}}
+            {{/each}}
+        </div>
+        <div id="classFilterWrapper" class="sectionTitle openable">
+                <h3>By Class</h3>
                 <i class="fa fa-angle-down" aria-hidden="true"></i>
-            </div>
-            <div id="classFilterHolder">
-                {{#each types}}
-                    {{> sideTypeFilter}}
-                {{/each}}
-            </div>
-            <div id="classFilterWrapper" class="sectionTitle openable">
-                    <h3>By Class</h3>
-                    <i class="fa fa-angle-down" aria-hidden="true"></i>
-            </div> 
-            <div id="classListHolder">    
-                {{#each myClasses}}
-                    {{> sidebarClasses}}
-                {{/each}}
-            </div>
+        </div> 
+        <div id="classListHolder">    
+            {{#each myClasses}}
+                {{> sidebarClasses}}
+            {{/each}}
         </div>
     </div>
     <div id="exportDiv" class="mode">
@@ -53,13 +46,36 @@
 </template>
 
 <template name="sidebarOptionPlate">
-    <div id="preferencesWrapper" class="sectionTitle openable downOffset">
+    <div id="settingMode" class="sectionTitle openable downOffset">
+        <h3>Classes</h3>
+        <i class="fa fa-angle-down" aria-hidden="true"></i>
+    </div>
+    <div id="settingModeWrapper">
+        <div class="mode manageClass">
+            <div class="status" style="background-color:{{modeStatus 'manageClass'}}"></div>
+            <i class="fa fa-tasks" aria-hidden="true"></i>
+            <h4>Manage Classes</h4>
+        </div>
+        <div class="mode addClass">
+            <div class="status" style="background-color:{{modeStatus 'addClass'}}"></div>
+            <i class="fa fa-graduation-cap" aria-hidden="true"></i>
+            <h4>Join Classes</h4>
+        </div>
+        <div class="mode createClass">
+            <div class="status" style="background-color:{{modeStatus 'createClass'}}"></div>
+            <i class="fa fa-book" aria-hidden="true"></i>
+            <h4>Create Classes</h4>
+        </div>
+    </div>
+    <div id="preferencesWrapper" class="sectionTitle openable">
         <h3>Preferences</h3>
         <i class="fa fa-angle-down" aria-hidden="true"></i>
     </div>
     <div id="prefCont">
         <div class="prefWrapper">
-            <h3 class="sectionTitle prefText">Theme:</h3>
+            <div class="sectionTitle prefText">
+                <h3>Theme</h3>
+            </div>
             <div id="theme" class="clickModify dropdown" tabindex="1">
                 <span>{{pref 'theme'}}</span>
                 <i class="fa fa-angle-down" aria-hidden="true"></i>
@@ -67,7 +83,9 @@
             {{> selectOptionMenu optionName="theme"}}
         </div>
         <div class="prefWrapper">
-            <h3 class="sectionTitle prefText">Default Mode:</h3>
+            <div class="sectionTitle prefText">
+                <h3>Default Mode</h3>
+            </div>
             <div id="mode" class="clickModify dropdown" tabindex="2">
                 <span>{{pref 'mode'}}</span>
                 <i class="fa fa-angle-down" aria-hidden="true"></i>
@@ -75,7 +93,9 @@
             {{> selectOptionMenu optionName="mode"}}
         </div>
         <div class="prefWrapper">
-            <h3 class="sectionTitle prefText">Hide Homework:</h3>
+            <div class="sectionTitle prefText">
+                <h3>Hide Homework</h3>
+            </div>
             <div id="timeHide" class="clickModify dropdown" tabindex="3">
                 <span>{{pref 'timeHide'}}</span>
                 <i class="fa fa-angle-down" aria-hidden="true"></i>
@@ -83,7 +103,9 @@
             {{> selectOptionMenu optionName="timeHide"}}
         </div>
         <div class="prefWrapper">
-            <h3 class="sectionTitle prefText">Hide Done:</h3>
+            <div class="sectionTitle prefText">
+                <h3>Hide Done</h3>
+            </div>
             <div id="done" class="clickModify dropdown" tabindex="4">
                 <span>{{pref 'done'}}</span>
                 <i class="fa fa-angle-down" aria-hidden="true"></i>
@@ -91,7 +113,9 @@
             {{> selectOptionMenu optionName="done"}}
         </div>
         <div class="prefWrapper">
-            <h3 class="sectionTitle prefText">Hide Reported:</h3>
+            <div class="sectionTitle prefText">
+                <h3>Hide Reported</h3>
+            </div>
             <div id="hideReport" class="clickModify dropdown" tabindex="5">
                 <span>{{pref 'hideReport'}}</span>
                 <i class="fa fa-angle-down" aria-hidden="true"></i>
@@ -102,7 +126,9 @@
 </template>
 
 <template name="sidebarRequestPlate">
-    <h3 class="sectionTitle downOffset">Requests</h3>
+    <div class="sectionTitle downOffset">
+        <h3>Requests</h3>
+    </div>
     <p class="sidebarDesc">Ask for help, submit a bug, or request a feature! We won't bite.</p>
     <textarea id="requestArea" class="restrict" rows="4" cols="50" maxlength="500" placeholder="Enter request here..."></textarea><br>
     <span id="requestRes" class="resText">{{restrict 'requestArea'}}</span>
@@ -120,4 +146,57 @@
     {{#each myClasses}}
         {{> sidebarClasses}}
     {{/each}}
-</template>
\ No newline at end of file
+</template>
+
+<template name="manageClass">
+    <div id="backgroundOverlay" style="background-color:{{divColor 'secondaryColor'}}">
+        <div id="colLeft">
+            <div class="settingHeader">
+                <div>
+                    <h2>My Classes</h2>
+                    <p>Manage Classes</p>
+                </div>
+                <div class="circleIcon">
+                    <i class="fa fa-tasks" aria-hidden="true"></i>
+                </div>
+            </div>
+            <div id="settingClassWrapper">
+                <div id="label" class="classBox">
+                    <span class="name classText">Class Name</span>
+                    <span class="teacher classText">Teacher</span>
+                    <span class="hour classText">Hour</span>
+                    <span class="subscriptions classText">Members</span>
+                </div>
+                {{#each myClasses}}
+                    {{> classDisplay}}
+                {{/each}}
+            </div>
+        </div>
+        <div id="colRight" style="background-color:{{divColor 'sidebarColor'}}">
+            <div class="settingHeader">
+                <div>
+                    <h2>Information</h2>
+                </div>
+                <div class="circleIcon">
+                    <i class="fa fa-info" aria-hidden="true"></i>
+                </div>
+            </div>
+            <div id="infoClassWrapper">
+            </div>
+        </div>
+    </div>
+</template>
+
+<template name="classDisplay">
+    <div class="classBox{{box}}" classid="{{_id}}" style="border:1px solid {{divColor 'textColor'}}">
+        <span class="name classText">{{name}}</span>
+        <span class="teacher classText">{{teacher}}</span>
+        <span class="hour classText">{{hour}}</span>
+        <span class="subscribers classText">{{subscribers}}</span>
+        {{#if mine}}
+            <i class="fa fa-times" aria-hidden="true"></i>
+        {{else}}
+            <i class="fa fa-times" aria-hidden="true" style="visibility:hidden"></i>
+        {{/if}}
+    </div>
+</template>
diff --git a/hourglass/client/menus/menus.js b/hourglass/client/menus/menus.js
index 0ce7261..06b64bd 100644
--- a/hourglass/client/menus/menus.js
+++ b/hourglass/client/menus/menus.js
@@ -1,4 +1,6 @@
-var filterOpen =  [false,true,true];
+Session.set("settingMode", "manageClass");
+
+var filterOpen =  [false, true, true, true, true];
 var sidebarMode = [null,null];
 
 Template.sidebarMenuPlate.rendered = function(){$(".menuWrapper").slideDown(300);}
@@ -21,10 +23,24 @@ Template.sidebarMenuPlate.helpers({
             });
         }
         return array;
-    }
+    },
+    filterOn() {
+        return Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0;
+    },
 });
 
 Template.sidebarMenuPlate.events({
+    'click .classes' () { // Click classes mode button.
+        if (Session.equals("mode", "classes")) return;
+        toggleToMode("classes")
+        setTimeout(startDragula, 500);
+        toggleToSidebar(false);
+    },
+    'click .calendar' () { // Click calendar mode button.
+         if (Session.equals("mode", "calendar")) return;
+        toggleToMode("calendar");
+        toggleToSidebar(false);
+    },
     'click #filterHead' (event) {
         if(event.target.id === "disableFilter") return;
         if(!filterOpen[0]) {
@@ -49,9 +65,123 @@ Template.sidebarMenuPlate.events({
             $("#classListHolder").slideUp(300);
         }
         filterOpen[2] = !filterOpen[2];
+    },
+    // CLASS FILTERS
+    'click .sideClass' (event) { // Click class list in sidebar.
+        var div = event.target;
+        while (div.getAttribute("classid") === null) div = div.parentNode;
+        var classid = div.getAttribute("classid");
+
+        if (Session.equals("sidebarMode","create")) { // If creating work from calendar.
+            var newSetting = Session.get("currentWork");
+            newSetting.class = classid;
+            Session.set("currentWork", newSetting);
+            openDivFade(document.getElementsByClassName("overlay")[0]);
+        } else { // Normal clicking turns on filter.
+            var array = Session.get("classDisp");
+            if (array.indexOf(classid) !== -1) {
+                array.splice(array.indexOf(classid), 1);
+            } else {
+                array.push(classid);
+            }
+            Session.set("classDisp", array);
+        }
+    },
+    'click .sideFilter' (event) {
+        var div = event.target;
+        while (div.getAttribute("type") === null) div = div.parentNode;
+        var type = div.getAttribute("type");
+
+        var array = Session.get("typeFilter");
+        if (array.indexOf(type) !== -1) {
+            array.splice(array.indexOf(type), 1);
+        } else {
+            array.push(type);
+        }
+        Session.set("typeFilter", array);
+    },
+    'click #disableFilter' () {
+        Session.set("classDisp", []);
+        Session.set("typeFilter", []);
+    },
+    'mouseover .sideClass' (event) { // Highlight/scale filter on-hover.
+        var div;
+        if (event.target.className !== "sideClass") {
+            div = event.target.parentNode;
+        } else {
+            div = event.target;
+        }
+        while (div.getAttribute("classid") === null) div = div.parentNode;
+        var classid = div.getAttribute("classid");
+        Session.set("classDispHover", classid);
+    },
+    'mouseleave .sideClass' (event) { // Turn off highlight/scale filter on-leave.
+        if (event.target.className !== "sideClass") {
+            var div = event.target.parentNode;
+            if (div.contains(event.target)) return;
+        }
+        Session.set("classDispHover", null);
+    },
+    'mouseover .sideFilter' (event) {
+        var div;
+        if (event.target.className !== "sideFilter") {
+            div = event.target.parentNode;
+        } else {
+            div = event.target;
+        }
+        while (div.getAttribute("type") === null) div = div.parentNode;
+        var type = div.getAttribute("type");
+        Session.set("typeFilterHover", type);
+    },
+    'mouseleave .sideFilter' (event) {
+        if (event.target.className !== "sideFilter") {
+            var div = event.target.parentNode;
+            if (div.contains(event.target)) return;
+        }
+        Session.set("typeFilterHover", null);
     }
 });
 
-Template.sidebarOptionPlate.events({
-
+Template.sidebarOptionPlate.helpers({
+    modeStatus(status) { // Color status of display modes.
+        return (Session.equals("settingMode", status)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)";
+    },
 });
+
+Template.sidebarOptionPlate.events({
+    'click .manageClass' () { // Click classes mode button.
+        if (Session.equals("settingMode", "manageClass")) return;
+        toggleToMode("manageClass");
+    },
+    'click .addClass' () { // Click classes mode button.
+        if (Session.equals("settingMode", "addClass")) return;
+        toggleToMode("addClass");
+    },
+    'click .createClass' () { // Click classes mode button.
+        if (Session.equals("settingMode", "createClass")) return;
+        toggleToMode("createClass");
+    },
+    'click #settingMode' () {
+        if(!filterOpen[3]) {
+            $("#settingModeWrapper").slideDown(300);
+        } else {
+            $("#settingModeWrapper").slideUp(300);
+        }
+        filterOpen[3] = !filterOpen[3];
+    },
+    'click #preferencesWrapper' () {
+        if(!filterOpen[4]) {
+            $("#prefCont").slideDown(300);
+        } else {
+            $("#prefCont").slideUp(300);
+        }
+        filterOpen[4] = !filterOpen[4];
+    }
+});
+
+function toggleToMode(mode) {
+    $("#mainBody").fadeOut(250, function() {
+        (Session.equals("sidebarMode", "option")) ? Session.set("settingMode", mode) : Session.set("mode",mode);
+        $("#mainBody").fadeIn(250);
+    });
+}
diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css
index 4d1ba54..52a98ca 100644
--- a/hourglass/client/profile/profile.css
+++ b/hourglass/client/profile/profile.css
@@ -235,62 +235,6 @@
     100% { width: 30%; }
 }
 
-#label {
-	margin-top: 2.5%;
-	margin-bottom: 2%;
-	
-	background-color: rgba(0,0,0,0.2);
-	box-shadow: none;
-
-	display: table;
-	cursor: default;
-}
-
-.classHolder {
-	width: 100%;
-	max-height: 41vh;
-	padding: 1%;
-	padding-right: 100%;
-
-	display: inline-block;
-
-	overflow-x: hidden;
-	overflow-y: scroll;
-}
-
-.classHolder h3 {
-	font-style: italic;
-	font-weight: 200;
-	margin-left: 1%;
-
-	color: #999;
-
-	-webkit-filter :none;
-	filter: none;
-}
-
-.classBox {
-	font-size: 1.3vw;
-	width: 94%;
-	margin-bottom: 3%;
-	padding: 2%;
-
-	background-color: #19B3B3;
-	box-shadow: 2px 2px 5px 3px #666;
-	display: table;
-	table-layout: fixed;
-	cursor: pointer;
-
-	-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;
-}
-
-.classBox:hover {
-	background-color: #138686;
-}
-
 #joinTop .fa-search {
 	font-size: 1.3vw;
 	margin-right: 3%;
@@ -315,38 +259,7 @@
 	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%;
-	display: table-cell;
-	text-align: left;
-}
-
-.classBox .fa-times {
-	display: table-cell;
-	width: 5%;
-}
-
-.name {
-	width: 40%;
-}
-
-.hour.classText, .subscribers.classText {
-	text-align: center;
-}
 
 #creRules {
 	margin: 5%;
diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html
index d197e5a..7f921a6 100644
--- a/hourglass/client/profile/profile.html
+++ b/hourglass/client/profile/profile.html
@@ -292,20 +292,6 @@
 	</div>
 </template>
 
-<template name="classDisplay">
-	<div class="classBox{{box}}" classid="{{_id}}">
-		<span class="name classText">{{name}}</span>
-		<span class="teacher classText">{{teacher}}</span>
-		<span class="hour classText">{{hour}}</span>
-		<span class="subscribers classText">{{subscribers}}</span>
-		{{#if mine}}
-			<i class="fa fa-times" aria-hidden="true"></i>
-		{{else}}
-			<i class="fa fa-times" aria-hidden="true" style="visibility:hidden"></i>
-		{{/if}}
-	</div>
-</template>
-
 <template name="userDisplay">
 	<div class="userBox" userid="{{_id}}">
 		<span class="email" onclick="window.location='/user/{{email}}'">{{email}}</span>
diff --git a/hourglass/lib/constants.js b/hourglass/lib/constants.js
index 16a9540..0c1e1f4 100644
--- a/hourglass/lib/constants.js
+++ b/hourglass/lib/constants.js
@@ -1,8 +1,8 @@
 themeColors =  {
     "lux": {
         "background": "White.jpg",
-        "mainColor": "#D9D9D9",
-        "secondaryColor": "#E8E8E8",
+        "mainColor": "#EEE",
+        "secondaryColor": "#D5D5D5",
         "sidebarColor": "#65839A",
         "userDropdownColor": "#E6E6E6",
         "iconHighlight": "#8695CF",
@@ -57,9 +57,9 @@ themeColors =  {
     "atlaneon": { 
        "background": "NeonBlue.jpg",
         "mainColor": "#1D1C23",
-        "secondaryColor": "#1F212f",
+        "secondaryColor": "#1F212F",
         "sidebarColor": "#312E32",
-        "userDropdownColor": "#2e312b", 
+        "userDropdownColor": "#2E312B", 
         "iconHighlight": "#70E6E6",
         "modeHighlight": "#70E6E6",
         "classCardColor":"#1FAAB1",