diff --git a/css/style.css b/css/style.css
index e69de29b..bc756863 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,137 @@
+body{
+    margin: 0;
+    background: #dddddd;
+}
+
+.header{
+    background: rgba(1, 250, 255, 1.0);
+    background: -webkit-radial-gradient(bottom, rgba(1, 250, 255, 1.0), rgba(1, 73, 255, 1.0));
+    background: -moz-radial-gradient(bottom, rgba(1, 250, 255, 1.0), rgba(1, 73, 255, 1.0));
+    background: radial-gradient(to top, rgba(1, 250, 255, 1.0), rgba(1, 73, 255, 1.0));
+    width: 100%;
+    height: 250px;
+    margin-bottom: 50px;
+}
+
+.header h1{
+    font-size: 80px;
+    color: #07f733;
+    margin: auto;
+    width: 60%;
+    text-align: center;
+    padding-top: 75px;
+    padding-bottom: 75px;
+}
+
+.message-counter{
+    width: 100%;
+    margin: auto;
+}
+
+#counter{
+    text-align: center;
+}
+
+.hide{
+    visibility: hidden;
+}
+
+/* FLEX BOXES*/
+.container{
+    display: flex;
+    flex-direction: row;
+}
+
+/* Inbox items */
+.inbox{
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+}
+
+.email-bars{
+    height: 50px;
+    background-color: white;
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-bottom: 15px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding-left: 25px;
+    padding-right: 25px;
+    border: 1px solid gray;
+    box-shadow: 2px 3px gray;
+    border-radius: 10px;
+    transition-property: border box-shadow;
+    transition-duration: 0.3s;
+}
+
+.email-bars:hover{
+    box-shadow: 0 7px 20px 0 rgba(0, 0, 0, 0.6);
+    border: 1px solid transparent;
+    cursor: pointer;
+}
+
+.email-bar-content{
+    height: 100%;
+    margin: 0;
+    text-align: center;
+    padding-top: 25px;
+    font-weight: small;
+}
+
+#inbox-name{
+    flex-grow: 2;
+    flex-shrink: 2;
+    font-weight: bold;
+}
+
+#inbox-subject{
+    flex-grow: 2;
+    flex-shrink: 2;
+}
+
+#inbox-date{
+    flex-grow: 1;
+    flex-shrink: 1;
+    font-size: smaller;
+    font-style: oblique;
+}
+/* End Inbox items */
+
+/* Message box items */
+.message-box{
+    flex: 1 1 0;
+    margin-left: 20px;
+    width: 100%;
+}
+
+.message{
+    padding: 15px;
+    background-color: white;
+    margin-right: 20px;
+    box-shadow: 0 7px 20px 0 rgba(0, 0, 0, 0.3) inset;
+    border-radius: 5px;
+}
+
+#message-date{
+    font-weight: small;
+    font-style: oblique;
+    float: right;
+}
+
+#message-name{
+    font-weight: bold;
+}
+
+#message-subject{
+    font-weight: bolder;
+    text-align: center;
+}
+
+#message-content{
+    font-size: 20px;
+}
+/* End Message box items*/
\ No newline at end of file
diff --git a/index.html b/index.html
index a8a1aad9..5dcd28f7 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,144 @@
 <html>
 	<head>
+		<meta charset="utf-8"/>
+		<title>Gee! Mail...</title>
 		<script src="js/mail-generator.js"></script>
 		<link href="css/style.css" rel="stylesheet" media="screen">
     <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 your browser
+				var counter = document.querySelector("#counter");
+				var intervalTime = 15000;
+				var numMessages = 0;
+				var currentMessageDiv;
+				var currentMessage;
+
+				counter.innerText = "Messages:  " + numMessages;
+
+				//Populate emails
+				window.geemails.forEach(function(message){
+					addNewMessage(message);
+				});
+
+				//Create new emails every x seconds
+				setInterval(function(){
+					addNewMessage(getNewMessage());
+				}, intervalTime);
+				
+				function addNewMessage(message){
+					var mailContainer = document.querySelector(".inbox");
+
+					//Create a new bar for email and add to the inbox
+					var newBar = document.createElement("div");
+					mailContainer.appendChild(newBar);
+					newBar.className = "email-bars";
+
+					//Create the elements of the email bar
+					var name = document.createElement("p");
+					var date = document.createElement("p");
+					var subject = document.createElement("p");
+
+					//Add content to elements of email bar
+					name.innerText = message.sender;
+					subject.innerText = message.subject;
+					date.innerText = message.date.toDateString();
+
+					//Add id's and class for each element of email bar
+					name.id = "inbox-name";
+					name.className += "email-bar-content";
+					subject.id = "inbox-subject";
+					subject.className += "email-bar-content";
+					date.id = "inbox-date";
+					date.className += "email-bar-content";
+
+					//Add elements to the new email bar
+					newBar.appendChild(name);
+					newBar.appendChild(subject);
+					newBar.appendChild(date);
+
+					//On click remove old message(if it exists) and add message
+					newBar.addEventListener("click", function(){
+						if(currentMessageDiv){
+							if(message === currentMessage){
+								//when button for current message is clicked, toggle visibility
+								if(currentMessageDiv.style.visibility === "hidden"){
+									currentMessageDiv.style.visibility = "visible";
+								}else{
+									currentMessageDiv.style.visibility = "hidden";
+								}
+							}else{
+								currentMessageDiv.parentElement.removeChild(currentMessageDiv);
+								displayEmail(message);
+							}
+						}else{
+							displayEmail(message);
+						}
+					});
+
+					//Adjust inbox counter
+					numMessages++;
+					counter.innerText = "Messages:  " + numMessages;
+				}
+
+				function displayEmail(message){
+					var messageBox = document.querySelector(".message-box");
+					var newMessage = document.createElement("div");
+					newMessage.className += "message";
+
+					//Create elements of the email
+					var name = document.createElement("p");
+					var date = document.createElement("p");
+					var subject = document.createElement("p");
+					var content = document.createElement("p");
+
+					//Add id to each element of the email
+					name.id = "message-name";
+					date.id = "message-date";
+					subject.id = "message-subject";
+					content.id = "message-content";
+
+					//Add content to elements of the email
+					name.innerText = message.sender;
+					date.innerText = message.date.toDateString();
+					subject.innerText = "Subject:  " + message.subject;
+					content.innerText = message.body;
+
+					//Add elements of email to message box
+					newMessage.appendChild(date);
+					newMessage.appendChild(name);
+					newMessage.appendChild(subject);
+					newMessage.appendChild(content);
+
+					//Add the message to the box made for it
+					messageBox.appendChild(newMessage);
+
+					currentMessageDiv = newMessage;
+					currentMessage = message;
+				}
+			};
     </script>
 	</head>
-	<body>
-		<div class="container" id="main">
-			Build Me!
+	<body id="override">
+		<div class="header">
+			<h1>Gee! Mail...</h1>
 		</div>
-	</body>
+
+		<div class="message-counter">
+			<h3 id="counter"></h3>
+		</div>
+
+		<!-- Container for the body -->
+		<div class="container">
+			<!-- Container for the inbox -->
+			<div class="inbox">
+
+			</div>
+
+			<!-- Container for the message display -->
+			<div class="message-box">
+			</div>
+		</div>
+
+		</body>
 </html>
\ No newline at end of file
