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..afb6c47 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -321,7 +321,7 @@ a
 	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%;
 }
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index e3eb7ca..244f5d2 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -52,6 +52,8 @@
                         {{> fullcalendar calendarOptions}}
                     </div>
                 {{/if}}
+
+                
             </div>
         </div>
 
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 53f9a4e..3f46264 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -303,7 +303,7 @@ Template.main.helpers({
         return openValues.requests;
     },
     currMode(name) { // Status of display mode.
-        return Session.equals("mode", name);
+        return (Session.equals("sidebarMode", "option")) ? Session.equals("settingMode", mode) : Session.equals("mode", name);
     },
     calendarOptions() { // Settings for the calendar, including work displaying.
         return {
@@ -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") {
@@ -821,21 +810,6 @@ Template.main.events({
 
 // 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 +829,29 @@ function toggleOptionMenu(toggle, menu) {
     }
 }
 
+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 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";
diff --git a/hourglass/client/menus/menus.html b/hourglass/client/menus/menus.html
index 79a30e1..990d5ed 100644
--- a/hourglass/client/menus/menus.html
+++ b/hourglass/client/menus/menus.html
@@ -11,11 +11,6 @@
             <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>
     <div id="filters">
         <div id="filterHead" class="sectionTitle openable">
@@ -53,7 +48,28 @@
 </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>
diff --git a/hourglass/client/menus/menus.js b/hourglass/client/menus/menus.js
index 0ce7261..5620dff 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);}
@@ -25,6 +27,17 @@ Template.sidebarMenuPlate.helpers({
 });
 
 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]) {
@@ -52,6 +65,46 @@ Template.sidebarMenuPlate.events({
     }
 });
 
-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);
+    });
+}