diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
index a214497..d0107e5 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -112,8 +112,9 @@ h4 {
 	transition: color 0.5s ease; 
 }
 
-input {
+input, textarea {
 	font-family: 'Raleway';
+	resize: none;
 }
 
 #aboveBar {
@@ -159,6 +160,10 @@ input {
 	background-color: #33ADFF;
 }
 
+#login-buttons {
+	display: none;
+}
+
 #menuContainer, #optionsContainer {
 	min-height: 100%;
 	max-height: 100%;
@@ -311,12 +316,14 @@ input {
 }
 
 .creWork {
+	margin-bottom: 5%;
 	cursor: pointer;
+	box-shadow: 0px 5px 5px 1px #666;
 
 	-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
+	transition: background-color 0.4s ease;
 }
 
 .creWork:hover {
@@ -327,6 +334,45 @@ input {
 	padding-left: 0;
 }
 
+.workHolder {
+	width: 90%;
+	position: relative;
+	left: 5%;
+}
+
+.workCard {
+	width: 100%;
+	margin-right: 0;
+	margin-bottom: 5%;
+
+	background-color: rgba(255,255,255,0.3);
+
+	box-shadow: 2px 2px 5px 3px #666;
+	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;
+}
+
+.workCard:hover {
+	background-color: rgba(0,0,0,0.05);
+}
+
+.cWorkCont {
+	padding: 5%;
+}
+
+.cWorkType {
+	height: 5px;
+}
+
+.cWorkName {
+	font-weight: 400;
+	margin-top: 0;
+}
+
 #editWork {
 	position: absolute;
 	top: 50%;
@@ -396,6 +442,43 @@ input {
 	margin-bottom: 5%;
 }
 
+.inputRadio {
+	margin-bottom: 0 !important;
+}
+
+.type {
+	margin-left: 30%;
+}
+
+#workComments h3 {
+	margin-bottom: 2%;
+	-webkit-filter: none;
+	filter: none;
+}
+
+#workSubmit {
+	font-weight: 200;
+	font-size: 140%;
+	padding: 4%;
+
+	background-color: rgba(0,0,0,0.25);
+	text-align: center;
+	cursor: pointer;
+
+	position: absolute;
+	left: -91%;
+	bottom: 7%;
+
+	-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;
+}
+
+#workSubmit:hover {
+	background-color: rgba(0,0,0,0.15);
+}
+
 .overlay {
 	width: 100%;
 	height: 100%;
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index d6c169f..cfb63d6 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -4,11 +4,13 @@
 </head>
 
 <template name="main">
+    {{> loginButtons}}
     <header style="background-color:{{divColor 'header'}}">
         <div id="aboveBar">
             <i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i>
             <h1>Hourglass</h1><h2>{{schoolName}}</h2>
             <i class="fa fa-cog" aria-hidden="true" style="color:{{iconColor 'options'}}"></i>
+            <div id="logout" onclick='document.getElementById("login-buttons-logout").click();'>Logout</div>
         </div>
         <div id="loadBar">
             <div id="progress" style="background-color:{{loadType}};width:{{loadPercent}}"></div>
@@ -61,39 +63,55 @@
                 <div id="workTypeBar" style="background-color:{{workType}}"></div>
                 <div id="workInfoContainer">
                     <div>
-                        <span class="change" id="workName">{{work 'name'}}</span>
+                        <span class="change req" id="workName">{{work 'name'}}</span>
                     </div>
                     <div id="workInfoNmCont">
                         <div>
                             <span class="workTitle">Due Date:</span>
-                            <span class="change" id="workDate">{{work 'dueDate'}}</span>
+                            <span class="change req" id="workDate">{{work 'dueDate'}}</span>
                         </div>
                         <div>
                             <span class="workTitle">Description:</span><br>
-                            <span class="change" id="workDesc">{{work 'description'}}</span>
+                            <span class="change req" type="textarea" id="workDesc">{{work 'description'}}</span>
                         </div>
                         <div>
-                            <div>
+                            <div  class="inputRadio">
                             <span class="workTitle">Type:</span>
-                            <span class="change radio" opc="0" op="0" re="readonly" id="workType">{{work 'type'}}</span>
+                            <span class="change radio req" opc="0" op="0" re="readonly" id="workType">{{work 'type'}}</span>
                             </div>
-                            <div class="workOptions" style="background-color:{{divColor 'header'}}">
-                                <p class="workOptionText">9th</p>
-                                <p class="workOptionText">10th</p>
-                                <p class="workOptionText">11th</p>
-                                <p class="workOptionText">12th</p>
+                            <div class="workOptions type" style="background-color:{{divColor 'header'}}">
+                                <p class="workOptionText">Normal</p>
+                                <p class="workOptionText">Quiz</p>
+                                <p class="workOptionText">Test</p>
+                                <p class="workOptionText">Project</p>
+                                <p class="workOptionText">Other</p>
                             </div>
                         </div>
                         <div id="workAttach">Attach other files</div>
                         <div id="workAttachmentHolder">
-                            {{#each work 'attach'}}
+                            {{#each work 'attachments'}}
                                 <a href={{link}}>{{filename}}</a>
                             {{/each}}
                         </div>
+                        {{#unless newWork}}
+                            <div id="workComments">
+                                <div>
+                                    <h3>Comments</h3>
+                                    <textarea id="workComment" rows="4" cols="50"></textarea>
+                                </div>
+                                <div id="comment">
+                                    {{#each work 'comments'}}
+                                        {{> comment}}
+                                    {{/each}}
+                                </div>
+                            </div>
+                        {{/unless}}
                     </div>
                 </div>
                 {{#if newWork}}
-                    <div id="workSubmit">Save</div>
+                    {{#if inRole}}
+                        <div id="workSubmit">Save</div>
+                    {{/if}}
                 {{/if}}
             </div>
         </div>
@@ -119,9 +137,19 @@
             <h4>Add Work</h4>
         </div>
         <div class="workHolder">
-        <!-- {{#each myWork}}
+        {{#each thisClassWork}}
             {{> classModeWork}}
-        {{/each}} -->
+        {{/each}}
+        </div>
+    </div>
+</template>
+
+<template name="classModeWork">
+    <div class="workCard" workid="{{_id}}">
+        <div class="cWorkType" style="background-color:{{typeColor}}"></div>
+        <div class="cWorkCont">
+            <p class="cWorkName">{{name}}</p>
+            <span class="cWorkDate">{{dueDate}}</span>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 4742ad1..db4c567 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -39,6 +39,7 @@ Session.set("sidebar", null);
 Session.set("mode", null); // Change to user preferences
 Session.set("newWork",null);
 Session.set("currentWork",null);
+Session.set("currentReadableWork",null);
 Session.set("modifying",null);
 Session.set("radioDiv",null);
 Session.set("radioOffset",null);
@@ -63,12 +64,20 @@ Template.registerHelper('myClasses', () => {
     	} else {
     		var array = [];
     		var courses = Meteor.user().profile.classes;
+
     		for(var i = 0; i < courses.length; i++) {
     			array.push(classes.findOne({_id:courses[i]}));
+    			var thisWork = work.find({class:array[i]["_id"]}).fetch();
+
+	    		for(var j = 0; j < thisWork.length; j++) {
+	    			thisWork[j].dueDate = getReadableDate(thisWork[j].dueDate);
+	    			thisWork[j].typeColor = workColors[thisWork[j].type];
+    			}
+    			array[i].thisClassWork = thisWork;
     		}
     		return array;
     	}
-});
+})
 
 Template.main.helpers({
     schoolName() {
@@ -161,18 +170,28 @@ Template.main.helpers({
         return "width:"+w.toString()+"px;height:"+h.toString()+"px;margin-left:"+-.5*w.toString()+"px;margin-top:"+-.5*h.toString()+"px";
     },
     work(value) {
-    	return Session.get("currentWork")[value];
+    	return Session.get("currentReadableWork")[value];
     },
     workType() {
-    	type = Session.get("currentWork").type
+    	type = Session.get("currentWork").type;
     	if(type.includes("edit")) {
     		return;
     	} else {
-    		return workColors.type;
+    		return workColors[type];
     	}
     },
     newWork() {
     	return Session.get("newWork");
+    },
+    inRole() {
+    	if(Session.get("newWork")) {
+    		return true;
+    	} else {
+    		if(Meteor.userId() === Session.get("currentWork").creator || 
+    		Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) ||
+    		classes.findOne({_id: Session.get("currentWork")._id}).moderators.indexOf(Meteor.userId()) !== -1
+    		) return true;
+    	}
     }
 });
 
@@ -232,19 +251,17 @@ Template.main.events({
         if(e === "overlay") {
         	closeDivFade(document.getElementsByClassName("overlay")[0]);
         	if(!Session.get("newWork")) {
-        		Session.set("serverData",getHomeworkFormData())
-        		sendData("editWork");
-        	} else {
-        		clearHomeworkForm();
+        		if(getHomeworkFormData() === null) return;
+    			Session.set("serverData",Session.get("currentWork"));
+    			sendData("editWork");
         	}
         	Session.set("newWork",null);
-        	Session.set("currentWork",null);
         }
 
         if (event.target.id !== sessval &&
             event.target.id !== sessval + "a" &&
             !Session.equals("modifying", null) &&
-            !event.target.parentNode.className.includes("profOptions")) {
+            !event.target.parentNode.className.includes("workOptions")) {
             closeInput(sessval);
         }
         if (!event.target.className.includes("radio") &&
@@ -262,16 +279,22 @@ Template.main.events({
         }
     },
     'click .creWork' (event) {
-        openDivFade(document.getElementsByClassName("overlay")[0]);
+    	if(event.target.className !== "creWork") {
+    		var attr = event.target.parentNode.getAttribute("classid");
+    	} else {
+    		var attr = event.target.getAttribute("classid");
+    	}
         Session.set("newWork", true);
-        Session.set("currentWork",
+        Session.set("currentReadableWork",
     		{
     			name:"Name | Click here to edit...",
-    			class:event.target.getAttribute("classid"),
+    			class:attr,
     			dueDate:"Click here to edit...",
     			description:"Click here to edit...",
     			type:"Click here to edit..."
     		});
+       	Session.set("currentWork",{class:attr});
+        openDivFade(document.getElementsByClassName("overlay")[0]);
     },
     'click .change' (event) {
     	var ele = event.target;
@@ -283,14 +306,21 @@ Template.main.events({
         ele.style.display = "none";
         var input = document.createElement("input");
 
-        if (ele.getAttribute("type") !== null) {
-            input.type = ele.getAttribute("type");
+        var typ = ele.getAttribute("type")
+        if (typ === "textarea") {
+            input = document.createElement("textarea");
+            input.style.height = 3 * dim.height.toString() + "px";
+            input.rows = "4";
+        } else if (typ !== null) {
+        	input.type = typ;
+        	input.style.height = 0.9 * dim.height.toString() + "px";
         } else {
-            input.type = "text";
+        	input.typ = "text";
+        	input.style.height = 0.9 * dim.height.toString() + "px";
         }
         input.value = ele.childNodes[0].nodeValue;
         input.className = "changeInput";
-        input.style.height = 0.9 * dim.height.toString() + "px";
+        
         input.style.width = "70%";
         input.style.padding = "0.1%";
         input.id = ele.id + "a";
@@ -316,9 +346,38 @@ Template.main.events({
             ele.parentNode.appendChild(span);
         }
     },
+    'click .radio' (event) {
+        var op = event.target;
+        Session.set("radioDiv", op.getAttribute("op"));
+        Session.set("radioOffset", op.getAttribute("opc"));
+        try {
+            for (var i = 0; i < document.getElementsByClassName("workOptions").length; i++) {
+                var curr = document.getElementsByClassName("workOptions")[i];
+                if (Session.get("radioDiv") !== i.toString()) {
+                    closeDivFade(document.getElementsByClassName("workOptions")[i]);
+                }
+            }
+        } catch (err) {}
+        openDivFade(document.getElementsByClassName("workOptions")[op.getAttribute("op")]);
+    },
+    'click .workOptions p' (event) {
+        var sessval = Session.get("modifying");
+        var p = event.target;
+        var opnum = (parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset")));
+        var input = document.getElementsByClassName("op")[opnum];
+        input.value = p.childNodes[0].nodeValue;
+        try {
+            closeInput(sessval);
+        } catch (err) {}
+
+        closeDivFade(p.parentNode);
+        input.focus();
+        Session.set("radioDiv", null);
+        Session.set("radioOffset", null);
+    },
     'keydown' (event) {
         var sessval = Session.get("modifying");
-        if (event.keyCode == 13) {
+        if (event.keyCode == 13 && sessval != "workDesc") {
             try {
                 closeInput(sessval);
             } catch (err) {}
@@ -344,14 +403,29 @@ Template.main.events({
         }
     },
     'click #workSubmit' () {
-    	Session.set("serverData",getHomeworkFormData());
+    	if(getHomeworkFormData() === null) return;
+    	Session.set("serverData",Session.get("currentWork"));
     	if(Session.get("newWork")) {
-    		sendData("editWork");
-    	} else {
     		sendData("createWork");
+    	} else {
+    		sendData("editWork");
     	}
     	Session.set("newWork",null);
-        Session.set("currentWork",null);
+        closeDivFade(document.getElementsByClassName("overlay")[0]);
+    },
+   	'focus .op' (event) {
+        event.target.click();
+    },
+    'click .workCard' (event) {
+    	var dom = event.target;
+    	while(event.target.className !== "workCard") event.target = event.target.parentNode;
+    	workid = event.target.getAttribute("workid");
+    	Session.set("newWork",false);
+    	var thisWork = work.findOne({_id:workid});
+    	Session.set("currentWork",thisWork);
+    	var thisReadWork = formReadable(thisWork);
+    	Session.set("currentReadableWork",thisReadWork);
+    	openDivFade(document.getElementsByClassName("overlay")[0]);
     }
 });
 
@@ -377,6 +451,7 @@ function sendData(funcName) {
 function closeInput(sessval) {
     var input = document.getElementById(sessval + "a");
     var span = document.getElementById(sessval);
+    span.style.color = "#8C8C8C";
     input.parentNode.removeChild(input);
     try {
         var restrict = document.getElementById("restrict");
@@ -389,17 +464,58 @@ function closeInput(sessval) {
     }
     span.style.display = "initial";
     Session.set("modifying", null);
-    if(Session.get("newWork")) {
-    	Session.set("serverData",getHomeworkFormData());
-    	sendData("editProfile");
+    if(!Session.get("newWork")) {
+    	if(getHomeworkFormData() === null) return;
+    	Session.set("serverData",Session.get("currentWork"));
+    	sendData("editWork");
     }
-
 }
 
 function getHomeworkFormData() {
-	return;
+	var inputs = document.getElementsByClassName("req");
+	var stop;
+	for(var i = 0; i < inputs.length; i++) {
+		var value = inputs[i].childNodes[0].nodeValue;
+		if(i === 2) {
+			if(Date.parse(inputs[i]) === NaN) { // Implement moment.
+				value = "Invalid date";
+				stop = true;
+			}
+		} else {
+			if(value.includes("Click here to edit")) {
+				inputs[i].childNodes[0].nodeValue = "Missing field";
+				inputs[i].style.color = "#FF1A1A";
+				stop = true;
+			}
+		}	
+	}
+	var desc = document.getElementById("workDesc");
+	if(desc.childNodes[0].nodeValue.includes("Click here to edit")) {
+		desc.childNodes[0].nodeValue = "Missing field";
+		desc.style.color = "#FF1A1A";
+		stop = true;
+	}
+	if(stop) return null;
+
+	var data = Session.get("currentWork");
+	data.name = document.getElementById("workName").childNodes[0].nodeValue;
+	data.dueDate = new Date(document.getElementById("workDate").childNodes[0].nodeValue);
+	data.description = document.getElementById("workDesc").childNodes[0].nodeValue;
+	data.type = document.getElementById("workType").childNodes[0].nodeValue.toLowerCase();
+	
+	Session.set("currentWork", data);
+	var readableData = formReadable(data);
+	Session.set("currentReadableWork", readableData);
 }
 
-function clearHomeworkForm() {
-	
+function getReadableDate(date) {
+	var days = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
+	var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
+	return days[date.getDay()]+", "+months[date.getMonth()]+" "+date.getDate()+", "+date.getFullYear();
 }
+
+function formReadable(input) {
+	input.dueDate = input.dueDate.getFullYear()+"-"+input.dueDate.getMonth()+"-"+input.dueDate.getDate();
+	input.type = input.type[0].toUpperCase() + input.type.slice(1);
+	return input;
+}
\ No newline at end of file
diff --git a/hourglass/client/profile/profile.js b/hourglass/client/profile/profile.js
index a317043..66dcb24 100644
--- a/hourglass/client/profile/profile.js
+++ b/hourglass/client/profile/profile.js
@@ -82,7 +82,7 @@ Template.profile.helpers({
     banner() {
         var width = window.innerWidth * 1600 / 1920;
         var height = width * 615 / 1600;
-        if (Meteor.user().profile.banner) {
+        if (Meteor.user().profile.banner !== undefined) {
             var banner = Meteor.user().profile.banner;
         } else {
             var banner = "Banners/defaultcover.jpg";
@@ -94,7 +94,7 @@ Template.profile.helpers({
     },
     avatar() {
         var dim = window.innerWidth * 1600 / 1920 * 0.16;
-        if (Meteor.user().profile.avatar) {
+        if (Meteor.user().profile.avatar !== undefined) {
             var pic = Meteor.user().profile.avatar + ".png";
         } else {
             var pic = "Avatars/" + (Math.floor(Math.random() * (11 - 1)) + 1).toString(); + ".png";
@@ -305,7 +305,7 @@ Template.profile.events({
     'click .profOptions p' (event) {
         var sessval = Session.get("modifying");
         var p = event.target;
-        var opnum = (parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset"))).toString();
+        var opnum = parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset"));
         var input = document.getElementsByClassName("op")[opnum];
         input.value = p.childNodes[0].nodeValue;
         try {
diff --git a/hourglass/server/main.js b/hourglass/server/main.js
index 0171ac8..346831e 100644
--- a/hourglass/server/main.js
+++ b/hourglass/server/main.js
@@ -166,13 +166,13 @@ Meteor.methods({
         var found = classes.findOne({
             _id: input.class
         });
-        console.log(input);
+
         if (Meteor.user() !== null &&
             found !== null &&
             Meteor.user().profile.classes.indexOf(input.class) !== -1 &&
             found.banned.indexOf(Meteor.userId()) === -1 &&
             found.blockEdit.indexOf(Meteor.userId()) === -1 &&
-            input.dueDate.getTime() >= ref && worktype.indexOf(type) != -1 &&
+            input.dueDate.getTime() >= ref && worktype.indexOf(input.type) != -1 &&
             input.name.length <= 50 && input.description.length <= 150) {
 
             input.confirmations = [Meteor.userId()];
@@ -190,18 +190,18 @@ Meteor.methods({
 
         var currentclass = classes.findOne({
             _id: work.findOne({
-                _id: workId
+                _id: change._id
             }).class
         });
         var authorized = currentclass.moderators.push(currentclass.admin);
         if (Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin'])) {
-            Meteor.update({
+            work.update({
                 _id: change._id
             }, {
                 $set: change
             });
         } else if (authorized.indexOf(Meteor.userId()) != -1) {
-            if (change.name.length <= 50 && change.description.length <= 150 && worktype.indexOf(type) != -1) {
+            if (change.name.length <= 50 && change.description.length <= 150 && worktype.indexOf(change.type) != -1) {
                 Meteor.update({
                     _id: change._id
                 }, {
@@ -219,7 +219,7 @@ Meteor.methods({
         } else if (Meteor.userId() === work.findOne({
                 _id: change._id
             }).creator) {
-            if (change.name.length <= 50 && worktype.indexOf(type) != -1 && input.dueDate.getTime() >= ref) {
+            if (change.name.length <= 50 && worktype.indexOf(change.type) != -1 && input.dueDate.getTime() >= ref) {
                 Meteor.update({
                     _id: change._id
                 }, {