diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
index dbdbf84..7af13fd 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -381,9 +381,70 @@ select {
 	transition: background-color 0.2s ease; 
 }
 
+#bg {
+	width: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: -1;
+}
+
 #mainBody {
 	width: 100%;
 	height: 100%;
 	position: absolute;
 	z-index: -1;
+
+	display: none;
+	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;
+}
+
+#calendar {
+	padding-top: 2%;
+	height: 100%; 
+}
+
+.fc-view-container {
+	background-color: rgba(255,255,255,0.8);
+}
+
+.fc-left {
+	padding: 0.5% 1% 0.5% 1%;
+	background-color: rgba(255,255,255,0.8);
+
+	-moz-border-radius: 10px;
+	-webkit-border-radius: 10px;
+	border-radius: 10px;
+}
+
+.fc-left h2 {
+	font-weight: 400;
+}
+
+.fc-head {
+	padding: 0.2% 0 0.2% 0;
+}
+
+.fc-day-header {
+	padding: 0.5% 0 0.5% 0 !important;
+}
+
+.fc-button {
+	background-color: rgba(255,255,255,0.5) !important;
+	background-image: none;
+
+	-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; 
+}
+
+.fc-button:hover {
+	background-color: rgba(255,255,255,0.9) !important;
+
 }
\ No newline at end of file
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index d3cc71e..14a90a7 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -85,7 +85,15 @@
   </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="calendar" style="{{calCenter}}">
+      {{> fullcalendar calendarOptions id="fullcalendar"}}
+    </div>
+  {{/if}}
   </div>
   <div class="overlay">
     <div class="overlayCont" style="{{overlayDim}};">
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 78d527f..0a2d29e 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -9,6 +9,7 @@ var openValues = {
 
 var themeColors = {
 	"light": {
+		"background":"White.jpg",
 		"header":"#EBEBEB",
 		"sidebar":"#65839A",
 		"statusIcons":"#33ADFF",
@@ -35,8 +36,6 @@ Session.set("confirm",null);
 Session.set("formCre",null);
 Session.set("inputOpen",null);
 
-Cookie.set("theme","light",{'years':15});
-
 Template.registerHelper( 'divColor', (div) => {
 	return themeColors[Cookie.get("theme")][div];	
 })
@@ -53,6 +52,11 @@ Template.main.helpers({
 			return;
 		}
 	},
+	bgSrc() {
+		var dim = [window.innerWidth,window.innerHeight];
+		var pic = themeColors[Cookie.get("theme")].background;
+		return pic;
+	},
 	menuStatus() {
   		let status = Session.get("menuOpen");
 	  	if(status) {
@@ -75,6 +79,13 @@ Template.main.helpers({
 			return;
 		}
 	},
+	currMode(name) {
+		if(name === Session.get("mode")) {
+			return true;
+		} else {
+			return false;
+		}
+	},
 	currFunction(name) {
 		if(name === Session.get("function")) {
 			return true;
@@ -133,6 +144,20 @@ Template.main.helpers({
 		    }
 		  ]
 		};
+	},
+	calendarOptions() {
+		return {
+			height: window.innerHeight *.8,
+			events: function() {
+				//Get homeworks
+				//if(homework thing ==test ) backgroundColor = color;
+				//return {title, start, end, className, backgroundColor}
+			}
+		};
+	},
+	calCenter() {
+		var width = window.innerWidth * .85;
+		return "width:"+width.toString()+"px;margin-left:"+(.5*window.innerWidth-.5*width).toString()+"px"; 
 	}
 });
 
@@ -144,10 +169,21 @@ Template.main.events({
 		Session.set("optionsOpen",!Session.get("optionsOpen"));
 	},
 	'click .classes' () {
-		Session.set("mode","classes");
+		var modeHolder = document.getElementById("mainBody");
+		closeDivFade(modeHolder);
+		setTimeout(function() {
+			Session.set("mode","classes");
+			openDivFade(modeHolder);
+		}, 300);
+		
 	},
 	'click .calendar' () {
-		Session.set("mode","calendar");
+		var modeHolder = document.getElementById("mainBody");
+		closeDivFade(modeHolder);
+		setTimeout(function() {
+			Session.set("mode","calendar");
+			openDivFade(modeHolder);
+		}, 300);
 	},
 	'click .addClass' () {
 		var functionHolder = document.getElementById("functionHolder")