diff --git a/css/style.css b/css/style.css
index e69de29b..74ddbf22 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,95 @@
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #666666;
+}
+
+#title img:nth-child(1) {
+    height: 10%;
+    /* width: 5%;  */
+    max-width: none;
+    vertical-align: middle;
+}
+
+#title {
+    color: #f2f2f2;
+}
+
+#cuz {
+    display:inline-block;
+    font-size: 12pt;
+}
+
+#menuItems {
+    float: left;
+    color: rgba(255, 20, 20, 0.788); 
+    margin-left: -10px;
+    margin-right: 0px;
+    padding-left: 5px;
+    padding-right: 0px;
+    font-size: 16pt;
+    background: #cccccc;
+    border-radius: 0px 25px 25px 0px;
+
+}
+
+#inboxCounter:hover {
+    color: inherit; 
+    background: inherit;
+    padding: none;
+    font-size: 16pt;
+}
+
+.menuOptions:hover {
+    color: white;
+    background: rgb(255, 20, 0.788);
+    border-radius: 0px 25px 25px 0px;
+    margin: 0px 0px 0px -3px;
+    padding: 5px 10px 5px 2px;
+
+}
+
+#emails{
+    /* padding: 20px 50px 20px 100px; */
+    margin: 20px 110px 20px 110px;
+    /* border: 1px solid red; */
+
+}
+
+.subject {
+    border: 1px solid cornflowerblue;
+    display: block;
+    margin: 0px 0px 0px 0px;
+    background-color: #333333;
+    color: #e6e6e6;
+    font-size: 14pt;
+    padding: 3px 0px 3px 10px;
+    /* overflow: auto; */
+}
+
+.date {
+    float: right;
+    display: none;
+    background-color: #333333;
+    font-size: 8pt;
+    /* overflow: auto; */
+    padding: 0px 10px 0px 0px;
+}
+
+.sender {
+    /* border: 2px solid blue; */
+    background-color: #333333;
+    display: none;
+    font-size: 12pt;
+    font: bold;
+    padding-top: 20px;
+    /* overflow: auto; */
+}
+
+.body {
+    padding: 20px 50px 20px 50px;
+    background-color: #333333;
+    /* border: 2px solid red; */
+    display: none;
+    font-size: 12pt;
+    /* overflow: auto; */
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index a8a1aad9..3784ebf1 100644
--- a/index.html
+++ b/index.html
@@ -2,17 +2,165 @@
 	<head>
 		<script src="js/mail-generator.js"></script>
 		<link href="css/style.css" rel="stylesheet" media="screen">
+		<style>
+			@import url('https://fonts.googleapis.com/css?family=Roboto');
+			</style>
     <script>
-      window.onload = function(){
+      window.onload = function() {
         // ALL OF YOUR JAVASCRIPT CODE SHOULD GO HERE. 
-        // We have to use window.onload so your JavaScript doesn't execute until the page has loaded and all HTML has been downloaded to your browser
-        
+				// We have to use window.onload so your JavaScript doesn't execute until the page has loaded and all HTML has been downloaded to your browser
+				
+				//Create box for where all emails will go and email sub-boxes for messages to go into
+				var emailBox = document.getElementById('emails');
+				var email = document.createElement('div');
+				email.className = 'email';
+				emailBox.appendChild(email);
+
+				//getEmails to display emails on page
+				function getEmails(x, y) {
+					for (var i = 0; i < x; i++) {
+
+						// function makeEmailBox(elem, label, content) {
+						// 	var label = document.createElement(elem);
+						// 	label.className = '';
+						// 	label.textContent = y[i].label;
+						// }
+
+						var email = document.createElement('div');
+						email.className = 'email';
+						emailBox.appendChild(email);
+
+						var subject = document.createElement('div');
+						subject.className = 'subject';
+						subject.textContent = 'Subject: ' + y[i].subject;
+						email.appendChild(subject);
+						// subject.style.display = 'block';
+
+						var date = document.createElement('div');
+						date.className = 'date';
+						date.textContent = 'Date: ' + y[i].date;
+						subject.appendChild(date);
+						// date.style.display = 'none';
+
+						var sender = document.createElement('div');
+						sender.className = 'sender';
+						sender.textContent = 'Sender: ' + y[i].sender;
+						subject.appendChild(sender);
+						// sender.style.display = 'none';
+
+						var body = document.createElement('div');
+						body.className = 'body';
+						body.textContent = y[i].body;
+						subject.appendChild(body);
+						// body.style.display = 'none';
+
+					}
+				}
+				getEmails(geemails.length, geemails);
+
+				var emailContainers = document.getElementsByClassName('email');
+				var subjectBoxes = document.getElementsByClassName('subject');
+				var dateBoxes = document.getElementsByClassName('date');
+				var senderBoxes = document.getElementsByClassName('sender');
+				var bodyBoxes = document.getElementsByClassName('body');
+
+				// console.log(emailContainers)
+				// console.log(subjectBoxes)
+				// console.log(dateBoxes)
+
+
+				//Loops through all messages to add click function to display/hide messages
+				for (var i = 0; i < geemails.length; i++) {
+					subjectBoxes[i].addEventListener('click', displayMessages); 
+				}
+
+				function displayMessages() {
+						// console.log(this)
+						// console.log(this.style)
+						// console.log(this.children[0])
+						// console.log(this.children[0].style.display)
+						//this.style is the subject div
+						//this.children[0].style is the date div
+						// console.log(this.style.display)
+						if (this.children[0].style.display === 'block') {
+								// console.log('it was block style')
+								this.children[0].style.display = 'none';
+								this.children[1].style.display = 'none';
+								this.children[2].style.display = 'none';
+							} else {
+								// console.log('it wasnt block style')
+								this.children[0].style.display = 'block';
+								this.children[1].style.display = 'block';
+								this.children[2].style.display = 'block';
+						}
+				}
+
+				//Declare default 10 emails for inboxCounter
+
+				var num = 10;
+				var inboxCounter = document.getElementById('inboxCounter');
+				inboxCounter.textContent = "(" + num + ")";
+
+				//Set interval for new messages to display
+				setInterval(function() {
+
+					//add 1 to inbox counter every interval. Use ++num is add to inboxCounter then update vs. num++ display update then add 1 to inboxCounter.
+
+					// console.log('before', num)
+					inboxCounter.textContent = "(" + ++num + ")";
+					// console.log('after', num)
+
+					var newEmail = document.createElement('div');
+					newEmail.className = 'newEmail'
+					emailBox.prepend(newEmail);
+					// console.log(newEmail)
+
+					//Store getNewMessages into variable
+					var getRandomMessages = getNewMessage();
+					console.log(getRandomMessages)
+
+					// Create newEmail boxes for every interval.
+					var newSubject = document.createElement('div');
+					newSubject.addEventListener('click', displayMessages);
+					newSubject.className = 'subject';
+					newSubject.textContent = "Subject: " + getRandomMessages.subject;
+					newEmail.appendChild(newSubject);
+					newSubject.style.display = 'block'
+				
+					var newDate = document.createElement('div');
+					newDate.className = 'date';
+					newDate.textContent = "Date: " + getRandomMessages.date;
+					newSubject.appendChild(newDate);
+					newDate.style.display = 'none'
+
+					var newSender = document.createElement('div');
+					newSender.className = 'sender';
+					newSender.textContent = "Sender: " + getRandomMessages.sender;
+					newSubject.appendChild(newSender);
+					newSender.style.display = 'none'
+					
+					var newBody = document.createElement('div');
+					newBody.className = 'body';
+					newBody.textContent = getRandomMessages.body;
+					newSubject.appendChild(newBody);
+					newBody.style.display = 'none'
+
+				}, 5000);	
       };
     </script>
 	</head>
 	<body>
-		<div class="container" id="main">
-			Build Me!
+		<h1 id="title"><img src="http://icons.iconarchive.com/icons/cornmanthe3rd/plex/512/Communication-gmail-icon.png">Gee-Mail <div id="cuz"> cuz...</div></h1>
+		<div id="menuItems"> 
+			<div class="menuOptions">Compose</div>
+			<div class="menuOptions">Inbox <span id="inboxCounter"></span></div>
+			<div class="menuOptions">Sent</div>
+			<div class="menuOptions">Important</div>
+			<div class="menuOptions">Drafts</div>
+			<div class="menuOptions">Trash</div>
+		</div>
+		<div id="emails">
+			<!-- emailBox goes here -->
 		</div>
 	</body>
 </html>
\ No newline at end of file
