diff --git a/css/style.css b/css/style.css
index e69de29b..6b625856 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,49 @@
+h1{
+    height: 200px;
+    width: 200px;
+    font-family: cursive;
+    font-size: 50px;
+    color: fuchsia;
+    position: absolute;
+    position: absolute;
+    top: 30px;
+    left: 50px;
+}
+th,
+td{
+    border: 1pt solid black; 
+    padding: 10px;
+    font-family: verdana;
+    text-align: left;
+    font-weight: 20;
+}
+
+.mailBox{
+    top:40px;
+    left:425px;
+    position: relative;
+}
+
+.container{
+    color: red;
+    font-family: Impact;    
+}
+.tableBody{
+    display: grid;
+    grid-template-columns: auto auto auto;
+    background-color: #2196F3;
+    padding: 10px;
+
+}
+
+.Row{
+    display: grid;
+    grid-template-columns: auto auto auto;
+    background-color: white;
+    padding: 10px;
+}
+
+.sendCol{
+    display: grid;
+    border: 1px solid black;
+}
diff --git a/index.html b/index.html
index a8a1aad9..18b313e7 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,154 @@
 <html>
 	<head>
+		<div class="mailBox">
+			<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWRyJWBEcsIsk4nxxZILoIghsApAMJj1IxcKnOdli6TJgnjFok' alt="mailbox">
+				<h1>Geemail</h1>
+			</div>
 		<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
-        
+        //For every geemail messagae create a new row within the tbody
+				var tbody = document.querySelector('.tableBody') 
+				
+				for (var i = 0; i < window.geemails.length; i++) {
+					let message = window.geemails[i]; 
+				
+					// var newRow = `<tr>
+					// 	<td>{message.date}</td>
+					// 	<td>{message.sender}</td>
+					// 	<td>{message.subject}</td>
+					// </tr>`
+					
+					var newRow = document.createElement('div')
+					var dateEle = document.createElement('div')
+					var sendEle = document.createElement('div')
+					var subEle = document.createElement('div')
+
+					sendEle.innerText = message.sender
+					subEle.innerText = message.subject
+					dateEle.innerText = message.date 
+					
+					sendEle.className = 'sendCol'
+					subEle.className = 'subCol'	
+					dateEle.className = 'dateCol'
+					newRow.appendChild(sendEle)
+					newRow.appendChild(subEle)
+					newRow.appendChild(dateEle)
+					
+						var newMessage = [message.sender,message.subject,message.date,message.body]
+				
+				// created table row for message body
+				var messageRow = document.createElement('div');
+				var messageEle = document.createElement('div');
+				messageEle.innerText = newMessage;
+				messageRow.appendChild(messageEle);
+				messageRow.style.display = 'none';
+
+				var addClickHandler = function(parentRow, childRow) {
+					parentRow.onclick = function(){
+						// console.log(childRow.style.display)
+						if (childRow.style.display === 'none') {
+							childRow.style.display = 'block';
+						} else {
+						childRow.style.display = 'none';
+						}
+						
+					}
+				}
+
+				addClickHandler(newRow, messageRow)
+				
+				/* newRow.onclick = function (){
+					
+					console.log(messageRow);
+
+					messageRow.style.display = 'inline-block'
+					
+				} */
+									
+					tbody.appendChild(newRow)
+					tbody.appendChild(messageRow)
+					
+				}
+
+				var count = 10;
+				document.getElementById("counter").innerText = 'Inbox: ' + count;
+				setInterval(function(){
+					// console.log(getNewMessage);
+					var addedMessage = getNewMessage();
+					
+					var addedRow = document.createElement('div')
+					var newDate = document.createElement('div')
+					var newSub = document.createElement('div')
+					var newSend = document.createElement('div')
+					var bodyRow = document.createElement('div')
+					var newBody = document.createElement('div')
+					
+					newSend.innerText = addedMessage.sender
+					newSub.innerText = addedMessage.subject
+					newDate.innerText = addedMessage.date
+					newBody.innerText = addedMessage.body
+					
+					
+					addedRow.appendChild(newSend)					
+					addedRow.appendChild(newSub);
+					addedRow.appendChild(newDate);
+					bodyRow.appendChild(newBody);					
+					tbody.appendChild(addedRow)
+					tbody.appendChild(bodyRow)
+					newBody.style.display = 'none'
+					addClickHandler(addedRow,newBody)
+
+					count++;
+					document.getElementById("counter").innerText = 'Inbox: ' + count;					
+				},2500)
+				
+				var composeMessage = document.getElementById('compose');
+				composeMessage.style.display = 'none';
+
+				function composeMessage(event) {
+					var compose = document.getElementById('compose')
+				if (compose.style.display === 'none') {
+					compose.style.display = 'block'
+				} else {
+					compose.style.display = 'none'
+				}
+				
+				}
+
+		
+			
+				
       };
+			function openMessage() {
+					console.log('opening')
+					document.getElementById('compose').style.display = 'block';
+				}
     </script>
 	</head>
 	<body>
 		<div class="container" id="main">
-			Build Me!
+			<button onclick="openMessage()">Compose Message</button>
+			<div id="outgoing">
+				<textarea name="compose" id="compose" cols="50" rows="10"></textarea>
+			</div>
+				<div>
+				<h2 id="counter">
+				</h2>
+			</div>
+			
+			<div class = "tableBody">
+				<div class="row">
+						<div class="column"><h3>Sender</h3></div>
+						<div class="column"><h3>Subject</h3></div>
+						<div class="column"><h3>Date</h3></div>
+					</div>
+				</div>
+					
+				
 		</div>
 	</body>
 </html>
\ No newline at end of file
