diff --git a/css/style.css b/css/style.css
index e69de29b..afa15121 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,67 @@
+
+#header{
+    display:block;
+    justify-self: center;
+    background-size: 20px;
+    background-position-x: right;
+    background-position-y: center;
+    background-color: cornflowerblue;
+    border-radius: 20px;
+    border: 1px solid black;
+}
+.messageHeader{
+    border-top: 1px solid black;
+    border-left: 1px solid black;
+    border-right: 1px solid black;
+    display: block;
+    background-color: teal;
+    font-family: 'Press Start 2P', cursive;
+    font-size: 20px;
+    margin-left: 25%; 
+}
+.newHead{
+    border-top: 1px solid black;
+    border-left: 1px solid black;
+    border-right: 1px solid black;
+    display: block;
+    background-color: cornflowerblue;
+    font-family: 'Press Start 2P', cursive;
+    font-size: 20px;
+    margin-left: 25%;
+}
+body{
+    background-color: rgba(56, 185, 105, 0.534);
+    background-image: url('https://i.kym-cdn.com/photos/images/original/001/331/213/35a.jpg');
+    background-repeat: no-repeat;
+    background-size: 350px;
+    background-position-x: 200px;
+    background-position-y: 20px;
+    background-attachment: fixed;
+}
+
+.content{
+    border-bottom: 1px solid black;
+    border-left: 1px solid black;
+    border-right: 1px solid black;
+    display: block;
+    margin-bottom: 10px;   
+    background-color: grey;
+    font-family: 'Press Start 2P', cursive;
+    margin-left: 25%; 
+}
+.newContent{
+    border-bottom: 1px solid black;
+    border-left: 1px solid black;
+    border-right: 1px solid black;
+    display: block;
+    margin-bottom: 10px;
+    background-color: teal;
+    font-family: 'Press Start 2P', cursive;
+    margin-left: 25%; 
+}
+.newMessageContent{
+    display: none;
+}
+.messageContent{
+    display: none;
+}
diff --git a/index.html b/index.html
index a8a1aad9..0a5bfaec 100644
--- a/index.html
+++ b/index.html
@@ -2,17 +2,144 @@
 	<head>
 		<script src="js/mail-generator.js"></script>
 		<link href="css/style.css" rel="stylesheet" media="screen">
-    <script>
+		<script>
       window.onload = function(){
-        // ALL OF YOUR JAVASCRIPT CODE SHOULD GO HERE. 
+		 // 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
-        
-      };
-    </script>
+        // container for header
+				
+		let	inbox = window.geemails;
+
+				function showHide2(){
+					let newContentMessage = this.querySelectorAll('.newMessageContent')[0];
+					if (newContentMessage.style.display === 'block'){
+						newContentMessage.style.display = 'none';
+					} else {
+						newContentMessage.style.display = 'block';
+					}
+				}
+				
+				let intervalID = setInterval(newMessage, 400);
+								
+				function newMessage(){
+				let nuNuNews = getNewMessage();
+				newCount++
+				newBod = nuNuNews.body;
+				newSub = nuNuNews.subject
+				newDate = nuNuNews.date
+				newSend = nuNuNews.sender
+				
+				
+				let newMessageHeader = document.createElement('div');
+				newMessageHeader.className = 'newHead';
+				document.body.appendChild(newMessageHeader)
+
+				let newDateElem = document.createElement('div');
+				newDateElem.className = 'newDate';
+				newDateElem.innerHTML = 'Date: ' + newDate;
+				newMessageHeader.appendChild(newDateElem);
+
+				let newSendElem = document.createElement('div');
+				newSendElem.className = 'newSend';
+				newSendElem.innerHTML = 'From: ' + newSend;
+				newMessageHeader.appendChild(newSendElem);
+
+				let newSubElem = document.createElement('div');
+				newSubElem.className = 'newSub';
+				newSubElem.innerHTML = 'Subject: ' + newSub;
+				newMessageHeader.appendChild(newSubElem);
+				
+				let newContentButton = document.createElement('div');
+					newContentButton.className = 'newContent';
+					newContentButton.innerHTML = 'Show';
+					newContentButton.addEventListener('click', showHide2)
+					document.body.appendChild(newContentButton);
+
+					let newMessageElem = document.createElement('div');
+					newMessageElem.className = 'newMessageContent';
+					newContentButton.appendChild(newMessageElem);
+
+					let newBodyElem = document.createElement('div');
+					newBodyElem.className = 'newBody';
+					newBodyElem.innerHTML = 'Body: ' + newBod;
+					newMessageElem.appendChild(newBodyElem);
+
+					inboxCounter.innerHTML = 'Inbox: ' + newCount;
+					console.log(newCount)
+					stop();
+				}
+				
+				let pageTitle = document.createElement('title');
+				pageTitle.innerHTML = 'Gee-Mail';
+				document.body.appendChild(pageTitle)
+
+				let headerBox = document.createElement('h1');
+				headerBox.id = 'header';
+				headerBox.innerHTML = 'Knw D Waz';
+				document.body.appendChild(headerBox);		
+				
+				for (i=0;i<inbox.length;i++){
+					let message = inbox[i];
+					let messageSubj = message.subject;
+					let messageSender = message.sender;
+					let messageBody = message.body;
+					let messageDate = message.date;
+
+					let messageHeader = document.createElement('div');
+					messageHeader.className = 'messageHeader';
+					document.body.appendChild(messageHeader)
+					
+					let dateElem = document.createElement('div');
+					dateElem.className = 'date';
+					dateElem.innerHTML = 'Date: ' + messageDate;
+					messageHeader.appendChild(dateElem);
+
+					let senderElem = document.createElement('div');
+					senderElem.className = 'sender';
+					senderElem.innerHTML = 'From: ' + messageSender;
+					messageHeader.appendChild(senderElem)
+
+					let subjectElem = document.createElement('div');
+					subjectElem.className = 'subject';
+					subjectElem.innerHTML = 'Subject: ' + messageSubj;
+					messageHeader.appendChild(subjectElem)
+
+					let contentButton = document.createElement('div');
+					contentButton.className = 'content';
+					contentButton.innerHTML = 'Show';
+					document.body.appendChild(contentButton);
+
+					let messageElem = document.createElement('div');
+					messageElem.className = 'messageContent';
+					contentButton.appendChild(messageElem);
+
+					let bodyElem = document.createElement('div');
+					bodyElem.className = 'body';
+					bodyElem.innerHTML = 'Body: ' + messageBody;
+					messageElem.appendChild(bodyElem);
+				}
+					let contentButton = document.getElementsByClassName('content')
+					for(i=0;i<inbox.length;i++){
+					contentButton[i].addEventListener('click', showHide);
+					}
+
+				function showHide(){
+					let contentMessage = this.querySelectorAll('.messageContent')[0];
+					if (contentMessage.style.display === 'block'){
+						contentMessage.style.display = 'none';
+					} else {
+						contentMessage.style.display = 'block';
+					}
+				}
+			
+				let newCount = inbox.length;
+				let inboxCounter = document.createElement('h4');
+					inboxCounter.innerHTML = 'inbox: ' + newCount;
+					headerBox.appendChild(inboxCounter)
+		
+			}
+		</script>
 	</head>
 	<body>
-		<div class="container" id="main">
-			Build Me!
-		</div>
 	</body>
 </html>
\ No newline at end of file
diff --git a/js/mail-generator.js b/js/mail-generator.js
index 52d3ba66..0fd72dc3 100644
--- a/js/mail-generator.js
+++ b/js/mail-generator.js
@@ -47,3 +47,4 @@
   window.getNewMessage = getNewMessage;
   loadGeeMails();	
 })();
+
