diff --git a/css/style.css b/css/style.css
index e69de29b..6827e2df 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,77 @@
+.mainmsg{
+    border-block-style: solid;
+padding-bottom: 100px;
+border-radius: 25px;
+
+
+
+}
+.topTabContainer {
+    position: absolute;
+    width: 100px;
+    background-color: rgba(250,250,250,0.35);
+    left:10;
+    float:left;
+
+}
+
+
+.topTabContainer {
+  height: 200px;
+  top: 0;
+  width: 200px;
+  height: 150px;
+  
+  
+
+}
+.topTab {
+    border-bottom: 1px solid #ccc;
+    box-shadow: 0 2px 2px #ddd;
+  }
+  .inboxTab {background-color: #ddd;
+}
+.tabContainer{
+    height: 550px;
+    float: left;
+    width: 200px;
+  height: 150px; 
+}
+.tabContainer {
+    position: relative;
+    background-color: rgba(250,250,250,0.35);
+  }.topTab:hover{
+    cursor: pointer;
+    background-color: #084736;
+    border-radius: 25px;
+  }
+  .inboxTab {background-color:rgb(33, 104, 235);
+    
+}
+.outboxTab {background-color: rgb(33, 104, 235)
+}
+.draftsTab {background-color:rgb(33, 104, 235)
+}
+.deletedTab {background-color: rgb(33, 104, 235)
+}
+img{
+    width: 2%;
+    height: auto;
+
+}body {
+	margin: 0;
+}
+
+
+header {
+	background: rgb(209, 199, 199);
+	color: rgb(192, 11, 29);
+	padding: 2px;
+}
+
+#today{
+	color: rgb(12, 28, 31);
+
+}
+
+
diff --git a/index.html b/index.html
index a8a1aad9..47543dbd 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,141 @@
-<html>
-	<head>
-		<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
-        
-      };
-    </script>
-	</head>
-	<body>
-		<div class="container" id="main">
-			Build Me!
+
+	<html>
+		<head>
+			<title>DevLeague GeeMail Challenge</title>
+			<script src="js/mail-generator.js"></script>
+			<link href="css/style.css" rel="stylesheet" media="screen">
+			<script>
+
+
+				window.onload = function(){
+console.log(window.geemails)
+
+for( var i=0; i<window.geemails.length; i++){
+	var mainbox= document.createElement('div');
+	mainbox.className= 'mainmsg';
+	document.body.appendChild(mainbox);
+window.geemails.push(newMessage
+)
+
+function addNewMessage(){
+	var newMessage = {
+		date: getNewMessage().date,
+		sender: getNewMessage().sender,
+		subject: getNewMessage().subject,
+		body: getNewMessage().body
+	};
+	window.geemails.push(newMessage);
+	
+	var messageHeader = document.createElement('div');
+	var messageDate = getNewMessage().date
+	messageHeader.className = 'messageHeaders';
+	messageHeader.innerHTML = getNewMessage().sender + ' ' + getNewMessage().subject + ' ' + messageDate;
+	main.appendChild(messageHeader);
+
+messageHeader.addEventListener('click', showHideBody);
+​var messageBody = document.createElement('div');
+	messageBody.className = 'messageBodies';
+	messageBody.innerHTML = getNewMessage().body;
+	messageHeader.appendChild(messageBody);
+	counter.innerHTML = 'Messages: ' + window.geemails.length;
+}
+
+​
+setInterval(addNewMessage, 1000)
+
+
+var bodybox=document.createElement('div');
+bodybox.className= 'bodymsg';
+bodybox.innerHTML=window.geemails[i].body
+bodybox.addEventListener.click
+mainbox.appendChild(bodybox)
+
+
+var datebox=document.createElement('div');
+datebox.className= 'datemsg';
+datebox.innerHTML=window.geemails[i].date
+datebox.addEventListener.click
+mainbox.appendChild(datebox)
+
+
+var senderbox=document.createElement('div');
+senderbox.className= 'sendermsg';
+senderbox.innerHTML=window.geemails[i].sender
+senderbox.addEventListener.click
+mainbox.appendChild(senderbox)
+
+
+var subjectbox=document.createElement('div');
+subjectbox.className= 'subjectmsg';
+subjectbox.innerHTML=window.geemails[i].subject
+subjectbox.addEventListener.click
+mainbox.appendChild(subjectbox)
+
+function allmsg(){
+var container=getNewMessage();
+
+var emptyBox=document.createElement('div');
+emptyBox.className='mainmsg';
+document.body.appendChild(emptyBox);
+
+var mainnew= document.createElement('div');
+emptyBox
+
+var elements = [""];
+elements.push(mainbox, bodybox,datebox,senderbox,subjectbox);
+
+
+
+
+
+}
+
+
+
+
+
+}
+};
+
+      
+  
+</script>
+		</head>
+		
+		<body>
+			
+			<header>
+				<h1>GeeMail</h1>
+				<h3>Powered By { }</h3>
+				<p id="today"></p>
+	
+			</header>
+	
+			<div id="menu">
+					
+			</div>
+				
+			<div id="main"> 
+						<p id="row1"></p>	  
+						<p id="row2"></p>
+	
+			</div> <div class="tabContainer"></div>
+			<div class="topTabContainer"></div>
+			<div class="topTab inboxTab">Inbox <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRv6hxbWWllfbDDalHrkJXhLjUYKs77cxxP-OGnyTk3P8aFo5fYvw" alt=""></div>
+			<div class="topTab outboxTab">Outbox <img src="https://cdn2.iconfinder.com/data/icons/communication-glyphs-2/128/97-512.png" alt=""></div>
+			<div class="topTab draftsTab">Drafts</div>
+			<div class="topTab deletedTab">Deleted</div>
 		</div>
-	</body>
-</html>
\ No newline at end of file
+			<div class="bottomTabContainer">
+			
+			</div>
+			<div>
+					<table>
+						
+					</table> 
+			</div>    
+			
+		
+			
+			</body>
+	</html>
\ No newline at end of file
