diff --git a/hourglass/client/login/login.css b/hourglass/client/login/login.css
new file mode 100644
index 0000000..b520a34
--- /dev/null
+++ b/hourglass/client/login/login.css
@@ -0,0 +1,148 @@
+#loginHeader {
+	font-weight: 600;
+	width: 100%;
+	margin: 0;
+	box-shadow: 2px 2px 5px 3px #666;
+
+	background-color: #EBEBEB;
+
+	display: inline-block;
+	position: relative;
+	z-index: 50;
+}
+
+#logo {
+	padding: 0.5%;
+	padding-left: 1%;
+	float: left;
+
+	-webkit-filter: drop-shadow(2px 2px 5px #333);
+	filter: drop-shadow(2px 2px 5px #333);
+}
+
+#banner {
+	height: 100%;
+	position: relative;
+}
+
+#loginTitle {
+	font-size: 255%;
+	padding: 1.4%;
+	padding-left: 1%;
+}
+
+#loginMain {
+	width: 100%;
+	min-height: 100%;
+	position: absolute;
+	top: 11%;
+
+	background-color: #E5E5E5;
+	background-image: url("banner100.jpg");
+}
+
+#circle {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+
+	-moz-border-radius: 50%;
+	-webkit-border-radius: 50%;
+	border-radius: 50%;
+
+	background-color: rgba(0,0,0,0.2);
+
+	-webkit-filter: drop-shadow(2px 2px 5px #333);
+	filter: drop-shadow(2px 2px 5px #333);
+}
+
+#loginContent {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+}
+
+.text {
+	text-align: center;
+	color: #FFF;
+
+	-webkit-filter: drop-shadow(2px 2px 5px #444);
+	filter: drop-shadow(2px 2px 5px #444);
+}
+
+h2.text {
+	font-size: 400%;
+	padding-bottom: 2%;
+	border-bottom: 1px solid #FEFEFE;
+}
+
+p.text {
+	font-size: 150%;
+}
+
+#loginButton {
+	font-size: 200%;
+	padding: 2%;
+
+	-webkit-border-radius: 6;
+	-moz-border-radius: 6;
+	border-radius: 6px;
+
+	position: relative;
+
+	background-color: #005CE6;
+
+	-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; 
+}
+
+#loginButton:hover {
+	background-color: #0066FF;
+}
+
+#loginButton:active {
+	background-color: #FF4D4D;
+
+	-webkit-transition: background-color 0.1s ease;  
+	-moz-transition: background-color 0.1s ease; 
+	-ms-transition: background-color 0.1s ease;
+	transition: background-color 0.1s ease; 
+}
+
+#loginFooter {
+	width: 100%;
+	box-shadow: 2px 2px 5px 3px #666;
+	background-color: #EBEBEB;
+	position: absolute;
+	bottom: 0;
+}
+
+.login-button {
+	display: none !important;
+}
+
+#github {
+	font-size: 150%;
+	margin: 0;
+	padding: 1%;
+
+	-webkit-filter: drop-shadow(2px 2px 5px #444);
+	filter: drop-shadow(2px 2px 5px #444);
+}
+
+a {
+	color: #0099CC;
+	text-decoration: none;
+
+	-webkit-transition: color 0.4s ease;  
+	-moz-transition: color 0.4s ease; 
+	-ms-transition: color 0.4s ease;
+	transition: color 0.4s ease
+}
+
+a:hover {
+	color: #00BFFF;
+}
+
diff --git a/hourglass/client/login/login.html b/hourglass/client/login/login.html
new file mode 100644
index 0000000..90628cd
--- /dev/null
+++ b/hourglass/client/login/login.html
@@ -0,0 +1,23 @@
+<template name="login">
+	<header id="loginHeader">
+		<img id="logo" src="logo.png" width="{{logo}}" height="{{logo}}">
+		<h1 id="loginTitle">Hourglass</h1>
+		<div id="loadBar">
+	      <div id="progress" style="background-color:{{loadType}};width:{{loadPercent}}"></div>
+	    </div>
+	</header>
+	<div id="loginMain">
+		<div id="circle" style="width:{{dim}};height:{{dim}};margin:{{margin}}">
+			<div id="loginContent" style="width:{{contDim}};height:{{contDim}};margin:{{contMargin}}">
+				<h2 class="text">Hourglass</h2>
+				<p class="text">All your work in one place. Finish before your time runs out.</p>
+				<h3 class="text" id="loginButton" style="{{hea}}">Sign in</h3>
+			</div>
+			
+		</div>
+	</div>
+	<footer id="loginFooter">
+		<p id="github">View the <a href="https://github.com/ksjdragon/hourglass">Code!</a></p>
+	</footer>
+	{{> loginButtons}}
+</template>
diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
new file mode 100644
index 0000000..da60283
--- /dev/null
+++ b/hourglass/client/main/main.css
@@ -0,0 +1,370 @@
+/* CSS Code Styling
+Tag { Always spaces between values
+	Font:
+	Height
+	Width
+	Margin: [top, right, bottom, left]; 
+	Padding: [top, right, bottom, left];
+
+	Border
+	<Newline if 3 or more above>
+	Drop-shadow
+	<Newline if 3 or more above>
+	Display
+	Position
+	Float
+	Overflow
+	z-index
+	<Newline between if 3 or more above>
+	Color related items
+	<Newline between>
+	Animation related items
+}*/
+
+@import url(https://fonts.googleapis.com/css?family=Raleway:200,400,600);
+
+html {
+	font-family: 'Raleway';
+	font-weight: 200;
+	overflow: hidden;
+
+	/*background-image: url("Hourglass.png");
+	background-size: 1920px 1080px;*/
+
+	-webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+body {
+	margin: 0;
+}
+
+header {
+	font-weight: 600;
+	width: 100%;
+	margin: 0;
+	box-shadow: 2px 2px 5px 3px #666;
+
+	display: inline-block;
+	position: relative;
+	z-index: 50;
+}
+
+h1,h2,h3,h4,h5 {
+	margin: 0;
+
+	-webkit-filter: drop-shadow(2px 2px 5px #666);
+	filter: drop-shadow(2px 2px 5px #666);
+}
+
+h1 {
+	padding: 0.4%;
+	float: left;
+}
+
+h4 {
+	font-size: 130%;
+	font-weight: 200;
+	padding: 5%;
+	-webkit-filter: drop-shadow(2px 2px 5px #333);
+	filter: drop-shadow(2px 2px 5px #333);
+
+	display: inline-block;
+
+	-webkit-transition: color 0.5s ease;  
+	-moz-transition: color 0.5s ease; 
+	-ms-transition: color 0.5s ease;
+	transition: color 0.5s ease; 
+}
+
+#aboveBar {
+	display: inline;
+}
+
+.fa-bars, .fa-cog {
+	font-size: 200%;
+	height: 100%;
+	padding: 0.6%;
+	padding-right: 0.8%;
+
+	float: left;
+	color: #333;
+
+	-webkit-transition: color 0.5s ease, background-color 0.5s ease;  
+	-moz-transition: color 0.5s ease, background-color 0.5s ease; 
+	-ms-transition: color 0.5s ease, background-color 0.5s ease;
+	transition: color 0.5s ease, background-color 0.5s ease; 
+
+	cursor: pointer;
+}
+.fa-cog {
+	padding-left: 0.8%;
+	float: right;
+}
+
+.fa-bars:hover, .fa-cog:hover {
+	background-color: #CCC;
+}
+
+#loadBar, #progress {
+	width: 100%;
+	height: 4px;
+	display: table;
+	background-color: #33ADFF;
+}
+
+#menuContainer, #optionsContainer {
+	min-height: 100%;
+	max-height: 100%;
+	width: 15%;
+	padding: 1% 0 1% 0;
+	box-shadow: 2px 2px 5px 3px #666;
+
+	position: absolute;
+	z-index:0;
+	overflow-x: hidden;
+	overflow-y: auto;
+	
+	-webkit-transition: margin 0.5s ease, background-color 0.5s ease;  
+	-moz-transition: margin 0.5s ease, background-color 0.5s ease; 
+	-ms-transition: margin 0.5s ease, background-color 0.5s ease;
+	transition: margin 0.5s ease, background-color 0.5s ease; 
+}
+
+#optionsContainer {
+	width: 12%;
+	right: 0;
+}
+
+.mode, .function {
+	width: 100%;
+	position: relative;
+	background-color: #849CAE;
+
+	-webkit-transition: background-color 0.5s ease;  
+	-moz-transition: background-color 0.5s ease; 
+	-ms-transition: background-color 0.5s ease;
+	transition: background-color 0.5s ease; 
+
+	cursor: pointer;
+}
+
+.mode:hover, .function:hover {
+	background-color: #A2B5C3;
+}
+
+.mode:active, .function:active {
+	background-color: #EFF3F5;
+
+	-webkit-transition: background-color 0.2s ease;  
+	-moz-transition: background-color 0.2s ease; 
+	-ms-transition: background-color 0.2s ease;
+	transition: background-color 0.2s ease; 
+}
+
+.fa-university, .fa-calendar {
+	font-size: 175%;
+	width: 12%;
+	padding: 10%;
+	-webkit-filter: drop-shadow(2px 2px 5px #666);
+	filter: drop-shadow(2px 2px 5px #666);
+}
+
+.fa-plus, .fa-minus, .fa-tasks, .fa-graduation-cap {
+	font-size: 130%;
+	padding: 5%;
+	-webkit-filter: drop-shadow(2px 2px 5px #666);
+	filter: drop-shadow(2px 2px 5px #666);
+}
+
+#functions {
+	width: 100%;
+	margin-top: 7%;
+
+	border-style: solid;
+	border-color: #D9D9D9;
+	border-left: none;
+
+	box-shadow: 0px 4px 8px 1px #222;
+
+	position: relative;
+	z-index: 1;
+}
+
+#functionHolder {
+	max-height: 48%;
+	width: 90%;
+	margin-bottom: 30%;
+	padding: 8%;
+
+	display: none;
+	position: absolute;
+	overflow-y: auto;
+	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;
+}
+
+#create {
+	font-size: 140%;
+	width: 100%;
+}
+
+.input {
+	margin: 0;
+	margin-top: 3%;
+	margin-bottom: -9%;
+
+	-webkit-filter: drop-shadow(2px 2px 5px #666);
+	filter: drop-shadow(2px 2px 5px #666);
+}
+
+.creSubmit {
+	width: 100%;
+	margin-top: 50%;
+	padding: 3% 0 3% 0;
+	text-align: center;
+	background-color: #849CAE;
+
+	-webkit-transition: background-color 0.5s ease;  
+	-moz-transition: background-color 0.5s ease; 
+	-ms-transition: background-color 0.5s ease;
+	transition: background-color 0.5s ease;
+
+	cursor: pointer;
+}
+
+.creSubmit:hover {
+	background-color: #A2B5C3;
+}
+
+.creSubmit:active {
+	background-color: #EFF3F5;
+
+	-webkit-transition: background-color 0.2s ease;  
+	-moz-transition: background-color 0.2s ease; 
+	-ms-transition: background-color 0.2s ease;
+	transition: background-color 0.2s ease; 
+}
+
+input, select {
+	font-family: 'Raleway';
+	width: 90%;
+	margin-bottom: 4%;
+	padding: 3.5%;
+
+	position: relative;
+	z-index: 0;
+}
+
+select {
+	font-family: 'Raleway';
+	width: 100%;
+}
+
+.creOptions {
+	width: 80%;
+	margin-top: -3.4%;
+
+	box-shadow: 2px 2px 5px 3px #666;
+
+	display: none;
+	position: absolute;
+	z-index: 5;
+	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; 
+}
+
+.creOptions p {
+	margin: 0;
+	padding: 5%;
+	display: block;
+}
+
+.creOptions p:hover {
+	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1)
+}
+
+.overlay {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0,0,0,0.5);
+
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 51;
+
+	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; 
+}
+
+.overlayCont {
+	font-size: 150%;
+	box-shadow: 2px 2px 5px 3px #666;
+
+	-moz-border-radius: 30px;
+	-webkit-border-radius: 30px;
+	border-radius: 30px;
+
+	position: absolute;
+	top: 50%;
+	left: 50%;
+
+	text-align: center;
+}
+
+.fa-check-circle-o, .fa-times-circle-o {
+	font-size: 300%;
+	padding: 5% 13% 5% 13%;
+
+	color: #333;
+
+	-webkit-transition: color 0.4s ease;  
+	-moz-transition: color 0.4s ease; 
+	-ms-transition: color 0.4s ease;
+	transition: color 0.4s ease;
+
+	cursor: pointer;
+}
+
+.fa-check-circle-o:hover {
+	color: #85E085;
+}
+
+.fa-check-circle-o:active {
+	color: #33CC33;
+
+	-webkit-transition: background-color 0.2s ease;  
+	-moz-transition: background-color 0.2s ease; 
+	-ms-transition: background-color 0.2s ease;
+	transition: background-color 0.2s ease; 
+}
+
+.fa-times-circle-o:hover {
+	color: #FF6666;
+}
+
+.fa-times-circle-o:active {
+	color: #ff1A1A;
+
+	-webkit-transition: background-color 0.2s ease;  
+	-moz-transition: background-color 0.2s ease; 
+	-ms-transition: background-color 0.2s ease;
+	transition: background-color 0.2s ease; 
+}
\ No newline at end of file
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
new file mode 100644
index 0000000..089513a
--- /dev/null
+++ b/hourglass/client/main/main.html
@@ -0,0 +1,99 @@
+<head>
+  <title>Hourglass</title>
+  <link rel="icon" href="favicon.ico?v=2">
+</head>
+
+<body>
+
+</body>
+
+<template name="main">
+  <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>
+      <i class="fa fa-cog" aria-hidden="true" style="color:{{iconColor 'options'}}"></i>
+    </div>
+    <div id="loadBar">
+      <div id="progress" style="background-color:{{loadType}};width:{{loadPercent}}"></div>
+    </div>
+  </header>
+  <div id="menuContainer" style="margin-left:{{menuStatus}};background-color:{{divColor 'sidebar'}}">
+    <div class="mode classes">
+      <i class="fa fa-university" aria-hidden="true"></i>
+      <h4 style="color:{{modeStatus 'classes'}}">Classes</h4>
+    </div>
+    <div class="mode calendar">
+      <i class="fa fa-calendar" aria-hidden="true"></i>
+      <h4 style="color:{{modeStatus 'calendar'}}">Calendar</h4>
+    </div>
+    <div id="functions">
+      <div class="function addClass">
+        <i class="fa fa-plus" aria-hidden="true"></i>
+        <h4 style="color:{{functionStatus 'addClass'}}">Join Class</h4>
+      </div>
+      <div class="function createClass">
+        <i class="fa fa-graduation-cap" aria-hidden="true"></i>
+        <h4 style="color:{{functionStatus 'creClass'}}">Create Class</h4>
+      </div>
+      <div class="function manageClass">
+        <i class="fa fa-tasks" aria-hidden="true"></i>
+        <h4 style="color:{{functionStatus 'manClass'}}">Manage Classes</h4>
+      </div>
+    </div>
+    <div id="functionHolder">
+        {{#if currFunction "addClass"}}
+          <p>Add a Class</p>
+        {{/if}}
+
+        {{#if currFunction "manClass"}}
+          <p>Manage Classes</p>
+        {{/if}}
+
+        {{#if currFunction "creClass"}}
+          <h2>Create a Class</h2>
+          <form id="create">
+            <p class="input">School:</p><br>
+              {{> inputAutocomplete settings=schoolcomplete class="form-control creInput" type="text" name="school" placeholder="Example: International Academy" }}
+            <p class="input">Hour:</p><br>
+              <input class="creInput" type="text" name="hour"><br>
+            <p class="input">Teacher</p>:<br>
+              <input class="creInput" type="text" name="teacher"><br>
+            <p class="input">Class Name:</p><br>
+              <input class="creInput" type="text" name="classname"><br>
+            <p class="input">Privacy:</p><br>
+            <div class="select">
+              <input class="creInput creInputSel" type = "text" name="privacy" readonly><br>
+              <div class="creOptions" style="background-color:{{divColor 'header'}}">
+                  <p>Public</p>
+                  <p>Private</p>
+              </div>
+            </div>
+            <p class="input">Category:</p><br>
+            <div class="select">
+              <input class="creInput creInputSel" type="text" name="category" readonly><br>
+              <div class="creOptions" style="background-color:{{divColor 'header'}}">
+                  <p>Class</p>
+                  <p>Club</p>
+                  <p>Other</p>
+              </div>
+            </div>
+            <div class="creSubmit">Submit Request</div>
+          </form> 
+        {{/if}}
+      </div>
+  </div>
+  <div id="optionsContainer" style="margin-right:{{optionsStatus}};background-color:{{divColor 'sidebar'}}">
+  </div>
+  <div class="overlay">
+    <div class="overlayCont" style="{{overlayDim}};">
+      <p>Are you sure?</p>
+      <i class="fa fa-check-circle-o" aria-hidden="true"></i>
+      <i class="fa fa-times-circle-o" aria-hidden="true"></i>
+    </div>
+  </div>
+</template>
+
+<template name="schoollist">
+  {{name}}
+</template>
\ No newline at end of file
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
new file mode 100644
index 0000000..a82b7f9
--- /dev/null
+++ b/hourglass/client/main/main.js
@@ -0,0 +1,221 @@
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+
+import './main.html';
+
+var openValues = {
+	"menu": "-25%",
+	"options": "-20%"
+};
+
+var themeColors = {
+	"light": {
+		"header":"#EBEBEB",
+		"sidebar":"#65839A",
+		"statusIcons":"#33ADFF",
+		"highlightText":"#FF1A1A"
+	},
+	"dark": {
+
+	}
+};
+
+var options = {
+	"school": [],
+	"privacy": ["Public", "Hidden"],
+	"category": ["Class", "Club", "Other"]
+}
+
+var searchSchools = [];
+
+Session.set("menuOpen", false);
+Session.set("optionsOpen", false);
+Session.set("mode",null); // Change to user preferences
+Session.set("function", null);
+Session.set("confirm",null);
+Session.set("formCre",null);
+
+Cookie.set("theme","light",{'years':15});
+
+Template.main.helpers({
+	divColor(div) {
+		return themeColors[Cookie.get("theme")][div];	
+	},
+	iconColor(icon) {
+		let status = Session.get(icon+"Open");
+		if(status) {
+			return themeColors[Cookie.get("theme")].statusIcons;
+		} else {
+			return;
+		}
+	},
+	menuStatus() {
+  		let status = Session.get("menuOpen");
+	  	if(status) {
+	  		return "0%";
+	  	} else {
+	  		return openValues["menu"];
+	  	}
+	},
+	modeStatus(status) {
+		if(status === Session.get("mode")) {
+			return themeColors[Cookie.get("theme")].highlightText;
+		} else {
+			return;
+		}
+	},
+	functionStatus(status) {
+		if(status === Session.get("function")) {
+			return themeColors[Cookie.get("theme")].highlightText;
+		} else {
+			return;
+		}
+	},
+	currFunction(name) {
+		if(name === Session.get("function")) {
+			return true;
+		} else {
+			return false;
+		}
+	},
+	optionsStatus() {
+	  	let status = Session.get("optionsOpen");
+	  	if(status) {
+	  		return "0%";
+	  	} else {
+	  		return openValues["options"];
+	  	}
+	},
+	overlayDim(part) {
+		var dim = [window.innerWidth * .2,window.innerHeight * .2];
+		var width = "width:"+dim[0].toString() + "px;";
+		var height = "height:"+dim[1].toString() + "px;";
+		var margin = "margin:"+(-dim[0]/2).toString() + "px 0 0 " + -(dim[1]/2).toString() + "px;";
+		var bg = "background-color:"+themeColors[Cookie.get("theme")]["header"]+";";
+		return width+height+margin+bg;
+	},
+	creHighlight(input) {
+		if(input == Session.get("creInput")) {
+			return "#CCEEFF";
+		} else {
+			return;
+		}
+	},
+	schoolcomplete() {
+		return {
+		  position: "bottom",
+		  limit: 6,
+		  rules: [
+		    {
+		      token: '',
+		      collection: schools,
+		      field: 'name',
+		      matchAll: true,
+		      template: Template.schoollist
+		    }
+		  ]
+		};
+	}
+});
+
+Template.main.events({
+	'click .fa-bars' () {
+		Session.set("menuOpen",!Session.get("menuOpen"));
+	},
+	'click .fa-cog' () {
+		Session.set("optionsOpen",!Session.get("optionsOpen"));
+	},
+	'click .classes' () {
+		Session.set("mode","classes");
+	},
+	'click .calendar' () {
+		Session.set("mode","calendar");
+	},
+	'click .addClass' () {
+		var functionHolder = document.getElementById("functionHolder")
+		closeDivFade(functionHolder);
+		setTimeout(function() {
+			Session.set("function","addClass");
+			openDivFade(functionHolder);
+		},300);
+	},
+	'click .manageClass' () {
+		var functionHolder = document.getElementById("functionHolder")
+		closeDivFade(functionHolder);
+		setTimeout(function() {
+			Session.set("function","manClass");
+			openDivFade(functionHolder);
+		},300);
+	},
+	'click .createClass' () {
+		var functionHolder = document.getElementById("functionHolder")
+		closeDivFade(functionHolder);
+		setTimeout(function() {
+			Session.set("function","creClass");
+			openDivFade(functionHolder);
+		},300);
+	},
+	'click .creSubmit' () {
+		openDivFade(document.getElementsByClassName("overlay")[0]);
+		setTimeout(function() {
+			document.getElementsByClassName("overlay")[0].style.opacity = "1";
+		}, 200);
+		Session.set("confirm","createClass");
+	},
+	'click .fa-check-circle-o' () {
+		sendData();
+		closeDivFade(document.getElementsByClassName("overlay")[0]);
+		closeDivFade(document.getElementById("functionHolder"));
+		document.getElementById("create").reset();
+		setTimeout(function() {
+			Session.set("confirm",null);
+			Session.set("function",null);
+		}, 300);
+	},
+	'click .fa-times-circle-o' () {
+		closeDivFade(document.getElementsByClassName("overlay")[0]);
+		closeDivFade(document.getElementById("functionHolder"));
+		document.getElementById("create").reset();
+		setTimeout(function() {
+			Session.set("confirm",null);
+			Session.set("function",null);
+		}, 300);
+	},
+	'click .creInput' (event) {
+		openDivFade(event.target.parentNode.childNodes[4]);
+	},
+	'click .creOptions p' (event) {
+		var p = event.target;
+		p.parentNode.parentNode.childNodes[1].value = p.childNodes[0].nodeValue;
+		closeDivFade(p.parentNode);
+	}
+});
+
+Template.schoollist.helpers({
+	name() {
+		return this.name;
+	}
+});
+
+function openDivFade(div) {
+	div.style.display = "block";
+	div.style.opacity = "0";
+	setTimeout(function() {
+		div.style.opacity = "1";
+	}, 100);
+}
+
+function closeDivFade(div) {
+	div.style.opacity = "0";
+	setTimeout(function() {
+		div.style.display = "none";
+	}, 100);
+}
+
+function sendData() {
+	// Take form data
+}
+
+function select(div) {
+	div.parentNode.parentNode.childNodes[0].value = div.childNodes[0].nodeValue;
+}
\ No newline at end of file
diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css
new file mode 100644
index 0000000..e69de29
diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html
new file mode 100644
index 0000000..f031f72
--- /dev/null
+++ b/hourglass/client/profile/profile.html
@@ -0,0 +1,3 @@
+<template name="profile">
+	
+</template>
\ No newline at end of file
diff --git a/hourglass/client/profile/profile.js b/hourglass/client/profile/profile.js
new file mode 100644
index 0000000..e69de29