diff --git a/css/style.css b/css/style.css
index e69de29b..add375b4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,46 @@
+.bigBox{
+  border: 1px solid black;
+  margin: 5px;
+  padding: 5px;
+}
+
+.date{
+
+  color: green;
+  display: inline;
+
+}
+.hideBody{
+color:red;
+display: none;
+}
+
+
+
+ .flip {
+  font-size: 16px;
+  padding: 10px;
+  text-align: center;
+  background-color: #4CAF50;
+  color: white;
+  border: solid 1px #a6d8a8;
+  margin: auto;
+}
+
+
+.sender{
+
+  margin: 5px;
+  color:red;
+}
+
+.subject{
+
+  margin: 5px;
+  color:purple;
+}
+.bodyMessage{
+	display: inline-block;
+	margin: 5px;
+	color:black;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index a8a1aad9..61f0f0fa 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 	<head>
 		<script src="js/mail-generator.js"></script>
@@ -5,14 +6,64 @@
     <script>
       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 </html>your browser
+
+count.innerHTML = "There are " + geemails.length + " messages in the mailbox!";
+
+
+for(var i = 0; i<geemails.length; i++){  
+
+
+  var wrapper = document.createElement('div');
+  wrapper.className = 'bigBox';
+  list.appendChild(wrapper)
+ 
+  var mailBox = document.createElement('div');
+  mailBox.className = 'date';
+  mailBox.innerHTML = "Date:  " + geemails[i].date;
+ mailBox.addEventListener('click',showMessage)
+  wrapper.appendChild(mailBox);
+  
+  var senderBox = document.createElement('p');
+  senderBox.className = 'sender';
+  senderBox.innerHTML = "Sender Name:  " +geemails[i].sender;
+  mailBox.appendChild(senderBox);
+  
+  var subjectBox = document.createElement('p');
+  subjectBox.className = 'subject';
+  subjectBox.innerHTML = "Subject:  " +geemails[i].subject;
+  mailBox.appendChild(subjectBox);
+
+    var bodyBox = document.createElement('p');
+  bodyBox.className = 'bodyMessage';
+  bodyBox.innerHTML = "Message Body:  " + "<br><br>" +geemails[i].body;
+  mailBox.appendChild(bodyBox);
+
+
+
+}
+
+function showMessage() {
+  var x = this.querySelector('.hideBody');
+  if (x.style.display === 'block') {
+    x.style.display = 'none';
+  } else {
+    x.style.display = 'block';
+  }
+}
+};
+
+
     </script>
 	</head>
+
 	<body>
-		<div class="container" id="main">
-			Build Me!
-		</div>
+  <h1>Eugene's Coding Challenge</h1>
+  <div><p id="count"></p></div>
+
+
+ <div class="hideBody" id="list"> show message</div>
+  
+
 	</body>
-</html>
\ No newline at end of file
+</html>
