diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
index 3cbb3c7..0b322da 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -321,18 +321,30 @@ input, textarea {
 	width: 100%;
 	padding-right: 50%;
 
-	position: absolute;
 	overflow-y: auto;
 }
 
+#sideClassWrapper {
+	max-height: 20vh;
+}
+
 #classListHolder h3 {
 	font-weight: 200;
 	margin: 5%;
 	margin-right: 4%;
+
 	display: inline-block;
 }
 
-.sideClass {
+#classFilterHolder h3 {
+	font-weight: 200;
+	padding: 5%;
+
+	box-shadow: 0px 4px 10px 1px #222;
+	background-color: rgba(0,0,0,0.2);
+}
+
+.sideClass, .sideFilter {
 	width: 100%;
 	height: 5vh;
 	padding: 1.5vh;
@@ -347,12 +359,15 @@ input, textarea {
 }
 
 .sideClass div {
-	width: 100%;
 	height: 100%;
-	display: table;
+	display: inline-block;
 }
 
-.sideClass:hover {
+.sideClass div:first-child {
+	width: 80%;
+}
+
+.sideClass:hover, .sideFilter:hover {
 	background-color: rgba(255,255,255,0.3);
 }
 
@@ -369,16 +384,36 @@ input, textarea {
 	display: table-row;
 }
 
+.sideTypeName {
+	margin: 0;
+	display: inline-block;
+}
+
+.sideFilter {
+	height: auto;
+}
+
 .fa-dot-circle-o {
 	font-size: 3vh;
 	color: #53BD42;
-	margin-top: -3.5vh;
-	margin-right: 4vh;
 
 	float: right;
+	text-align: right;
+}
 
-	-webkit-filter: drop-shadow(2px 2px 5px #666);
-	filter: drop-shadow(2px 2px 5px #666);
+.sideClass .fa-dot-circle-o {
+	line-height: 4.4vh;
+}
+
+.sideFilter div {
+	width: 100%;
+	height: 100%;
+}
+
+.sideFilter .fa-dot-circle-o {
+	margin: 0;
+	margin-right: 3vh;
+	display: inline-block;
 }
 
 #classesMode {
@@ -1082,7 +1117,7 @@ input, textarea {
 }
 
 #done {
-	height: 37vh;
+	height: 34vh;
 	top: 0;
 	overflow-y: auto;
 }
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index 311f9f8..c27a656 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -31,21 +31,30 @@
                     <h4>Manage Classes</h4>
                 </div>
             </div>
-            <div id="classListHolder">
             {{#if myClasses}}
-                <h3>Enrolled</h3>
-                {{#if calCreWork}}
-                    <h3 id="calCreWork">-- Pick a class</h3>
-                {{else}}
-                    {{#if filterOn}}
-                        <h3 id="disableFilter">Disable All</h3>
+                <div id="classListHolder">
+                    <h3>Enrolled</h3>
+                    {{#if calCreWork}}
+                        <h3 id="calCreWork">-- Pick a class</h3>
+                    {{else}}
+                        {{#if filterOn}}
+                            <h3 id="disableFilter">Disable All</h3>
+                        {{/if}}
                     {{/if}}
-                {{/if}}
-                    {{#each myClasses}}
-                        {{> sidebarClasses}}  
-                    {{/each}}
+                    <div id="sideClassWrapper">
+                        {{#each myClasses}}
+                            {{> sidebarClasses}}  
+                        {{/each}}
+                    </div>
+                
+                </div>
+                <div id="classFilterHolder">
+                    <h3>Filters</h3>
+                    {{#each types}}
+                        {{> sideTypeFilter}}
+                    {{/each}}   
+                </div>
             {{/if}}
-            </div>
         </div>
         <div id="optionsContainer" style="right:{{optionsStatus}};background-color:{{divColor 'sidebar'}}">
             <h3>Preferences</h3>
@@ -256,12 +265,13 @@
         <div>
             <p class="sideClassName">{{name}}</p>
             <p class="sideClassHour">{{hour}}</p>
+        </div>
+        <div>
             {{#if selected}}
                 <i class="fa fa-dot-circle-o" aria-hidden="true"></i>
             {{/if}}
         </div>
     </div>
-
 </template>
 
 <template name="classesMode">
@@ -326,4 +336,15 @@
             <span>{{user}}</span>
         </div>
     </div>
+</template>
+
+<template name="sideTypeFilter">
+    <div class="sideFilter" type="{{type}}">
+        <div>
+            <p class="sideTypeName">{{typeName}}</p>
+            {{#if selected}}
+                <i class="fa fa-dot-circle-o" aria-hidden="true"></i>
+            {{/if}}
+        </div>
+    </div>
 </template>
\ No newline at end of file
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 1a8e12b..1d048bd 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -8,6 +8,7 @@ import './main.html';
 var load = true;
 var calWorkOpen = null;
 var calWorkDate = null;
+//["class1","class2"] {"2":"class2","1":"class1"}
 
 var openValues = {
     "menu": "-270px",
@@ -56,6 +57,7 @@ Session.set("modifying", null); // Stores current open input.
 Session.set("noclass", null); // If user does not have classes.
 Session.set("calCreWork", null); // If user is creating a work from calendar.
 Session.set("classDisp", []); // Stores current filter for classes.
+Session.set("typeFilter", []); // Stores type filters for classes.
 Session.set("classDispHover", null); // Stores current hovered filter.
 Session.set("refetchEvents", null); // Stores whether to get calendar events again.
 Session.set("commentRestrict", ""); // Stores text for comment character restriction.
@@ -79,7 +81,6 @@ Template.registerHelper('userProfile', () => {
 });
 
 Template.registerHelper('screen', (multiplier, fraction) => {
-    console.log(multiplier,fraction);
     if(typeof multiplier !== "string") return screen.width.toString() + "px";
     if(typeof fraction !== "string") return (screen.width * parseFloat(multiplier)).toString() + "px"
     return ((screen.width) * parseFloat(multiplier) / parseFloat(fraction)).toString() + "px";
@@ -384,6 +385,18 @@ Template.main.helpers({
     newWork() { // If user is creating a new work.
         return Session.get("newWork");
     },
+    types() {
+        var types = Object.keys(workColors);
+        var array = [];
+        for(var i = 0; i < types.length; i++) {
+            array.push({ 
+                "type": types[i],
+                "typeName": types[i][0].toUpperCase() + types[i].slice(1),
+                "selected": _.contains(Session.get("typeFilter"), types[i])
+            });
+        }
+        return array;
+    },
     inRole() { // Checks correct permissions.
         var thisWork = work.findOne({
             _id: Session.get("currentWorkId")
@@ -806,6 +819,21 @@ Template.main.events({
             Session.set("classDisp", array);
         }
     },
+    'click .sideFilter' (event) {
+        console.log("hi");
+        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(classid) !== -1) {
+            array.splice(array.indexOf(classid), 1);
+        } else {
+            array.push(classid);
+        }
+        console.log(array);
+        Session.set("typeFilter", array);
+    },
     'click #disableFilter' () {
         Session.set("classDisp", []);
     },