diff --git a/css/style.css b/css/style.css
index e69de29b..764dcd3e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,42 @@
+.envelopedMessage{
+  border: 1px solid black;
+    background-color: #D3D3D3;
+}
+
+h1  {
+  background-color:#D3D3D3;
+  color: #000;
+  font-size: 300%;
+}
+
+div {
+  margin: 10px 10px 10px 10px;
+}
+
+.subject {
+  font-weight: bold;
+}
+
+#main-container{
+  height:100%;
+  width:100%;
+}
+
+#messageBody {
+  position:relative;
+  border:1px solid black;
+  margin-left:500px;
+  padding:10px;
+  background-color:#D3D3D3;
+}
+
+#inbox {
+  float:left;
+  width: 50%;
+  margin-right:20px;
+}
+
+#main{
+  width:75%;
+  margin: 0 auto;
+}
diff --git a/index.html b/index.html
index a8a1aad9..c0c60de6 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,154 @@
 <html>
-	<head>
-		<script src="js/mail-generator.js"></script>
-		<link href="css/style.css" rel="stylesheet" media="screen">
+    <head>
+        <script src="js/mail-generator.js"></script>
+        <link href="css/style.css" rel="stylesheet" media="screen">
+    <h1> <center> Zen's Super Basic Gee Mail </h1>
+    <center><br><b>Inbox</b></br> </center>
+
     <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
+        var numMessages = 0;
+        //Let's try this again. 
+        for (var i = 0; i < window.geemails.length; i++) {
+        //reference starts at the first message
+            var message = window.geemails[i];
+            createNewMessage(message);
+            addMessageCount();
+        }
+
+            //every 5 seconds, lets perform this function and get new mail
+            setInterval(function(){
+              var newMessage = window.getNewMessage()
+              createNewMessage(newMessage);
+              addMessageCount();
+              updateMessageBodyLocation();
+            }, 5000);
         
-      };
+                        
+            function createNewMessage(message) {
+                var messageSubject = message.subject;
+                var messageSender = message.sender;
+                var messageBody = message.body;
+                var messageDate = message.date;
+             // now that we have our messages, we need a envelopes to put them in
+
+                var messageEnvelope = document.createElement('div');
+                //Let's create a class name for styling and making it easier to grab later
+                messageEnvelope.className = 'envelopedMessage';
+                var id = "message-" + numMessages;
+                
+                messageEnvelope.id = id
+                messageEnvelope.addEventListener("click", function(e) {
+                  var id = this.id
+                  var element = document.getElementById(id)
+                  var subject = element.querySelectorAll(".subject")[0].innerHTML
+                  var sender = element.querySelectorAll(".sender")[0].innerHTML
+                  var message = element.querySelectorAll(".messageContent")[0].innerHTML
+                  
+                  var messageBody = document.getElementById("messageBody")
+                  var messageEnvelopeId = messageBody.messageEnvelopeId
+                  if (typeof messageEnvelopeId !== 'undefined') {
+                    document.getElementById(messageEnvelopeId).style.backgroundColor = "#D3D3D3"
+                  }
+
+                  if (messageEnvelopeId == id && messageBody.clicked) {
+                    messageBody.style.display = "none"
+                    messageBody.clicked = false
+                  } else {
+                    messageBody.style.display = "block"
+                    messageBody.clicked = true
+                    this.style.backgroundColor = "grey"
+                  }
+                  
+                  messageBody.innerHTML = subject + " (" + sender + ")"
+                  messageBody.innerHTML += "<hr/>"
+                  messageBody.innerHTML += "Message: "
+                  messageBody.innerHTML += "<hr/>"
+                  messageBody.innerHTML += message
+                  
+                  messageBody.messageEnvelopeId = id
+                  updateMessageBodyLocation()
+                });
+                //Let's put our envelopes in our inbox
+                var inbox = document.getElementById("inbox");
+                inbox.prepend(messageEnvelope);
+
+                //Now let's create a date stamp to put on / in  the envelope.  It should look like this I think.
+                // <div class="date">
+                //     1/2/19
+                // </div>
+                var dateStamp = document.createElement('div');
+                //Let's call this date stamp container the date
+                dateStamp.className = 'date';
+                // Let's put a date inside of that dateStamp
+                dateStamp.innerHTML = messageDate;
+                // Let's put the date on that envelope buddy yeah
+                messageEnvelope.appendChild(dateStamp);
+
+                // Now let's create a subject line to put on the envelope
+                // <div class="subject">
+                //     RE:How to write javascript for dummies
+                // </div>
+
+                var subjectLine = document.createElement('div');
+                //Creating a class called subject for the subject line
+                subjectLine.className = 'subject';
+                //sticking the actual suject line in the tag
+                subjectLine.innerHTML = 'Subject: ' + messageSubject;
+                //Now we stick it back on the envelope
+                messageEnvelope.appendChild(subjectLine)
+
+                //Now we do the same thing to for the sender
+                var senderName = document.createElement('div');
+                senderName.className = 'sender';
+                senderName.innerHTML = 'From: ' + messageSender;
+                messageEnvelope.appendChild(senderName)
+
+                //And one for the body content as well
+                var messageContent = document.createElement('div');
+                messageContent.className = 'messageContent';
+                messageContent.style = "display:none;";
+                messageContent.innerHTML = messageBody;
+                messageEnvelope.appendChild(messageContent)
+            }
+        
+            function addMessageCount() {
+                //Let's count all of the messages
+                numMessages = numMessages + 1;
+                var messageCount = document.getElementById("message-count");
+                messageCount.innerHTML = 'Messages: ' + numMessages;
+            }
+        
+            function updateMessageBodyLocation() {
+              var messageBody = document.getElementById("messageBody")
+              var messageEnvelopeId = messageBody.messageEnvelopeId
+
+              if (typeof messageEnvelopeId == 'undefined') {
+                return
+              }
+
+              var pixels = String((numMessages - Number(messageEnvelopeId.replace("message-", "")) - 1)*106) + "px"
+              messageBody.style.top = pixels
+            }
+        };
+
     </script>
-	</head>
-	<body>
-		<div class="container" id="main">
-			Build Me!
-		</div>
-	</body>
-</html>
\ No newline at end of file
+    </head>
+    <body>
+        <div class="container" id="main">
+            <!--This is our inbox that we can put our envelopes in-->
+            <div id="message-count">    
+
+            </div>
+            <div id="main-container">
+              <div id="inbox">
+              </div>
+              <div id="messageBody" style="display: none">
+              </div>
+            </div>
+            
+        </div>
+    </body>
+</html>
