diff --git a/css/style.css b/css/style.css
index e69de29b..3ebd8c26 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,58 @@
+/* fonts:
+font-family: 'Roboto Slab', serif;
+font-family: 'Megrim', cursive; */
+#main{
+    font-family: 'Roboto Slab', serif;
+}
+.msgContainer{
+    font-family: 'Roboto Slab', serif;
+    padding: 10px;
+    border-top: 5px double darkred;
+    background-color: whitesmoke;
+}
+body{
+    background-color: cornflowerblue;
+}
+.dates{
+    text-align: right;
+}
+/* CSS for badges */
+.notification {
+    background-color: #555;
+    color: white;
+    text-decoration: none;
+    padding: 15px 26px;
+    position: relative;
+    display: inline-block;
+    border-radius: 2px;
+  }
+  .notification:hover {
+    background: red;
+  }
+  .notification .badge {
+    position: absolute;
+    top: 0px;
+    right: -10px;
+    padding: 5px 10px;
+    border-radius: 50%;
+    background: red;
+    color: white;
+  }
+  .notification .outBadge{
+    position: absolute;
+    top: 0px;
+    right: -10px;
+    padding: 5px 10px;
+    border-radius: 50%;
+    background: red;
+    color: white;
+  }
+  .notification .trashBadge{
+    position: absolute;
+    top: 0px;
+    right: -10px;
+    padding: 5px 10px;
+    border-radius: 50%;
+    background: red;
+    color: white;
+  }
\ No newline at end of file
diff --git a/index.html b/index.html
index a8a1aad9..66e7b5cd 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,149 @@
-<html>
+<!DOCTYPE html>
+<html lang='en'>
 	<head>
 		<script src="js/mail-generator.js"></script>
 		<link href="css/style.css" rel="stylesheet" media="screen">
+		<link href="https://fonts.googleapis.com/css?family=Megrim|Roboto+Slab&display=swap" rel="stylesheet">
     <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
+				//console.log(window.geemails);
+				for(var i=0;i<geemails.length;i++){
+					//empty box for messages
+					var msgBox = document.createElement('div');
+					msgBox.className = 'msgContainer';
+					main.appendChild(msgBox);
+					//dates adding to msg box
+					var maildate = document.createElement('div');
+					maildate.className = 'dates';
+					maildate.innerHTML = 'Date: ' + geemails[i].date;
+					msgBox.appendChild(maildate);
+					//sender added to msg box
+					var mailsender = document.createElement('div');
+					mailsender.className = 'mailSender';
+					mailsender.innerHTML = 'From: ' + geemails[i].sender;
+					msgBox.appendChild(mailsender);
+					//subject added to msg box
+					var mailsub = document.createElement('div');
+					mailsub.className = 'subject';
+					mailsub.innerHTML = 'Subject: ' + geemails[i].subject;
+					mailsub.addEventListener('click', showHide) //event listener to show message
+					msgBox.appendChild(mailsub);
+					//message body added to msg box
+					var mailbody = document.createElement('div');
+					mailbody.className = 'messageBody';
+					mailbody.innerHTML = geemails[i].body;
+					mailbody.style.display = 'none';
+					mailsub.appendChild(mailbody);
+				}
+
+				//function for show/hide message body in line 25
+				function showHide(){
+					var showBody = this.querySelector('.messageBody');
+					if (showBody.style.display === 'none'){
+						showBody.style.display = 'block';
+					}else{
+						showBody.style.display = 'none';
+					}
+				}
+
+				//Inbox message counter
+				var countBox = document.getElementsByTagName('span');
+				countBox[1].innerHTML = geemails.length;
+				//random number for outbox icon
+				countBox[3].innerHTML = Math.floor(Math.random() * 20);
+				//random number for trash icon
+				countBox[5].innerHTML = Math.floor(Math.random()* 400);
+
+
+				//function for creating new messages, same as above
+				function createNewMsg(){
+					var msgTest = getNewMessage();
+					var msgBox = document.createElement('div');
+					msgBox.className = 'msgContainer';
+					main.appendChild(msgBox);
+					var maildateNew = document.createElement('div');
+					maildateNew.className = 'dates';
+					maildateNew.innerHTML = 'Date: ' + msgTest.date;
+					msgBox.appendChild(maildateNew);
+					var mailsenderNew = document.createElement('div');
+					mailsenderNew.className = 'mailSender';
+					mailsenderNew.innerHTML = 'From: ' + msgTest.sender;
+					msgBox.appendChild(mailsenderNew);
+					var mailsubNew = document.createElement('div');
+					mailsubNew.className = 'subject';
+					mailsubNew.innerHTML = 'Subject: ' + msgTest.subject;
+					mailsubNew.addEventListener('click', showHide) //event listener click added to message subject to show message
+					msgBox.appendChild(mailsubNew);
+					var mailbodyNew = document.createElement('div');
+					mailbodyNew.className = 'messageBody';
+					mailbodyNew.innerHTML = msgTest.body;
+					mailbodyNew.style.display = 'none';
+					mailsubNew.appendChild(mailbodyNew);
+					countBox[1].innerHTML = ++geemails.length; //adds 1 to inbox counter each time new message is made
+				}
+
+
+				//interval set for creating new messages
+				setInterval(createNewMsg, 5000);
+
+				// Old message counter, working. decided to use span badge instead.
+				// var countBox = document.createElement('p');
+				// countBox.classname = 'counter';
+				// countBox.innerHTML = 'Inbox: ' + geemails.length;
+				// main.appendChild(countBox);
+
+				//Outbox click function to show/hide
+				var sentPic = document.getElementById('outbox');
+				sentPic.style.display = 'none';
+				countBox[2].addEventListener('click', showoutbox);
+				function showoutbox(){
+					if(sentPic.style.display === 'none'){
+						sentPic.style.display = 'block';
+					}else{
+						sentPic.style.display = 'none';
+					}
+				}
+				//Trash click function show/hide
+				var trashPic = document.getElementById('trash');
+				trashPic.style.display = 'none';
+				countBox[4].addEventListener('click', showtrash);
+				function showtrash(){
+					var grabBox = document.getElementsByClassName('msgContainer');
+					if(trashPic.style.display === 'none'){
+						trashPic.style.display = 'block'
+					}else{
+						trashPic.style.display = 'none';
+					}
+				}
       };
-    </script>
+		</script>
+		<title>Mail Time</title>
 	</head>
 	<body>
-		<div class="container" id="main">
-			Build Me!
+		
+		<div class="container" id="main" style ='display: block'>
+			<h1>Welcome Back!</h1>
+			<a href="#" class="notification">
+				<span>Inbox</span>
+				<span class="badge">10</span>
+			</a>
+			<a href="#" class='notification'>
+				<span>Outbox</span>
+				<span class="outBadge">0</span>
+			</a>
+			<a href="#" class='notification'>
+				<span>Trash</span>
+				<span class="trashBadge">0</span>
+			</a>
+			<div id="outbox">
+					<img src="http://sw2njs9jb.gb-02.live-paas.net/wp-content/uploads/2017/11/send-in-banner-1024x726.png" alt="sent">
+				</div>
+				<div id="trash">
+					<img src="https://www.latimes.com/resizer/JlRVR60x20qnXEAQNADKtdrtfgw=/1200x0/arc-anglerfish-arc2-prod-tronc.s3.amazonaws.com/public/4D46FVPJNNBQ3N2JAP4AVWFI2E.jpg" alt="trash">
+				</div>
 		</div>
+		
 	</body>
 </html>
\ No newline at end of file
diff --git a/js/mail-generator.js b/js/mail-generator.js
index 52d3ba66..f03d84b1 100644
--- a/js/mail-generator.js
+++ b/js/mail-generator.js
@@ -46,4 +46,4 @@
   window.geemails = [];
   window.getNewMessage = getNewMessage;
   loadGeeMails();	
-})();
+})();
\ No newline at end of file
