diff --git a/css/style.css b/css/style.css
index e69de29b..5c78f88b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,294 @@
+body{
+    font-family: 'Poppins', sans-serif; 
+}
+.topheader{
+    border: solid;
+    color: #eeeeee;
+    margin: 25 -10 20 -10px;
+}
+.fa-bars{
+    float: left;
+    margin: 15px 15px 0px 15px;
+    font-size: 150%;
+    color: #727272;
+}
+#tooltipbars{
+    position: relative;
+    display: inline-block;
+}
+.fa-bars #tooltiptextbars{
+    visibility: hidden;
+    position: absolute;
+}
+.fa-bars:hover #tooltiptextbars{
+    visibility: visible;
+    font-family: 'Poppins', sans-serif;
+    font-size: 15px;
+    margin-top: 15px;
+    margin-left: -10px;
+    padding: 5px;
+    border-radius: 5px;
+    background-color: #424242;
+    color: white;
+}
+.fa-bars:hover{
+    margin: 5px;
+    background-color: #dddddd;
+    background-size: 100px;
+    padding: 10px;
+    border-radius: 50px;
+}
+.fa-envelope{
+    float: left;
+    margin-top: 5px;
+    margin-left: 5px;
+    font-size: 300%;
+    color: #D44638;
+}
+.fa-envelope:hover{
+    margin: -5px;
+    margin-right: -10px;
+    background-color: #dddddd;
+    background-size: 100px;
+    padding: 10px;
+    border-radius: 50px;
+}
+#topHeader{
+    float: left;
+    margin-top: 10px;
+    margin-left: 15px;
+    color: #727272;
+    font-family: 'Poppins', sans-serif;
+}
+#topnav{
+    float: left;
+    margin-top: 5px;
+    margin-left: 50px;
+}
+input[type=text]{
+    font-size: 150%;
+    color: #727272;
+    font-family: 'Poppins', sans-serif;
+    border-radius: 5px;
+    background-color: #eeeeee;
+    width: 150%;
+}
+#acctSym{
+    float: right;
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-right: 15px;
+    color: white;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    font-family: 'Poppins', sans-serif;
+    background-color: #D44638;
+    border-radius: 40px;
+}
+.fa-th{
+    float: right;
+    margin-right: 10px;
+    margin-top: 15px;
+    font-size: 175%;
+    color: #727272;
+}
+.fa-question-circle{
+    float: right;
+    margin-right: 15px;
+    margin-top: 15px;
+    font-size: 175%;
+    color: #727272;
+}
+aside{
+    float:left;
+    margin-right: 135px;
+    height: 100%;
+    position: fixed;
+}
+.fa-plus{
+    float: left;
+    font-size: 150%;
+    color: #D44638;
+}
+.composetext{
+    padding-left: 15px;
+}
+#compose{
+    border-style: outset;
+    border-radius: 30px;
+    padding: 15px;
+}
+.sidebaricons{
+    float: left;
+    margin-left: 10px;
+    font-size: 150%;
+    color: #727272;
+}
+.sidebartext{
+    margin-left: 15px;
+}
+.fa-square{
+    float: left;
+    font-size: 150%;
+    color: #727272;
+    margin-top: 20px;
+    margin-left: 285px;
+}
+.fa-sort-down{
+    float: left;
+    font-size: 150%;
+    color: #727272;
+    margin-left: 10px;
+    margin-top: 15px;
+}
+.fa-redo{
+    float: left;
+    font-size: 150%;
+    color: #727272;
+    margin-left: 30px;
+    margin-top: 20px;
+}
+.fa-ellipsis-v{
+    float: left;
+    font-size: 150%;
+    color: #727272;
+    margin-left: 30px;
+    margin-top: 20px;
+}
+.fa-cog{
+    float: right;
+    font-size: 150%;
+    color: #727272;
+    margin-right: 20px;
+    margin-top: 20px;
+}
+.fa-chevron-right{
+    float: right;
+    font-size: 150%;
+    color: #727272;
+    margin-right: 30px;
+    margin-top: 20px;
+}
+.fa-chevron-left{
+    float: right;
+    font-size: 150%;
+    color: #727272;
+    margin-right: 30px;
+    margin-top: 20px;
+}
+#primary{
+    float: left;
+    font-size: 150%;
+    color: #727272;
+    margin-top: 5px;
+    margin-left: 285px;
+}
+#social{
+    float: left;
+    font-size: 150%;
+    color: #727272;
+    margin-left: 100px;
+    margin-top: 5px;
+}
+#promotions{
+    float: left;
+    font-size: 150%;
+    color: #727272;
+    margin-left: 100px;
+    margin-top: 5px;
+}
+.inboxes{
+    float: left;
+    margin-left: 20px;
+    margin-top: 5px;
+}
+#emailCounter{
+    float: right;
+    margin-right: 20px;
+    margin-top: 20px;
+}
+#inboxCounter{
+    float: right;
+}
+.lineprimary{
+    border: solid;
+    color: #eeeeee;
+    margin-top: 30px;
+    margin-left: 285px;
+}
+.lineemail{
+    border: solid;
+    color: #eeeeee;
+    margin-top: 20px;
+    margin-left: 285px;
+}
+#senderStart{
+    float: left;
+}
+#subjectStart{
+    float: left;
+    margin-left: 75px;
+    overflow: hidden;
+    white-space: wrap;
+    max-width: 400px;
+    text-overflow: ellipsis;
+}
+#bodyStart{
+    float: left;
+    display: none;
+    word-wrap: break-word;
+    overflow: hidden;
+    white-space: wrap;
+    text-overflow: ellipsis;
+    max-width: 400px;
+}
+#dateStart{
+    float: right;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 200px;
+}
+.sender{
+    /* float: left; */
+    display: inline;
+    margin-left: 285px;
+}
+.subject{
+    /* float: left; */
+    display: inline;
+    column-span: inherit;
+}
+.theBody{
+    /* float: left; */
+    display: none;
+    column-span: inherit;
+
+}
+.date{
+    /* float:right; */
+    display: inline;
+    column-span: inherit;
+
+    overflow: hidden;
+    white-space: nowrap;
+}
+.nextEmailSend{
+    display: inline;
+}
+.nextEmailSub{
+    display: inline;
+}
+.nextEmailBod{
+    display: inline;
+}
+.nextEmailD{
+    display: inline;
+}
+#allEmails{
+    display: inline;
+}
+.container{
+    display: flex;
+    justify-content: space-between;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index a8a1aad9..157caad6 100644
--- a/index.html
+++ b/index.html
@@ -2,17 +2,223 @@
 	<head>
 		<script src="js/mail-generator.js"></script>
 		<link href="css/style.css" rel="stylesheet" media="screen">
+		<link rel="icon" href="http://www.iconarchive.com/download/i98301/dakirby309/simply-styled/Gmail.ico">
+		<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
+		<script src="https://kit.fontawesome.com/268ac8feec.js"></script>
     <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 totalEmails = document.createElement('div');
+					totalEmails.className = "counts";
+					totalEmails.innerHTML = "1 of 1"
+					emailCounter.appendChild(totalEmails);
+						
+				var totalEmailsCount = document.createElement('div');
+					totalEmailsCount.id = "count";
+					totalEmailsCount.innerHTML = geemails.length;
+					inboxCounter.appendChild(totalEmailsCount);
+
+					/* var emailBox = document.createElement('div');
+					allEmails.appendChild(emailBox); */
+
+				for (i=0; i<geemails.length; i++){
+
+					var wrapper = document.createElement('div');
+					wrapper.className = "container";
+					allEmails.appendChild(wrapper);
+
+					var senderBox = document.createElement('div');
+					senderBox.className = "sender";
+					senderBox.innerHTML = geemails[i].sender;
+					wrapper.appendChild(senderBox);
+
+					var subjectBox = document.createElement('div');
+					subjectBox.className = "subject";
+					subjectBox.innerHTML = geemails[i].subject;
+					subjectBox.addEventListener('click', showEmail)
+					wrapper.appendChild(subjectBox);
+
+					var bodyBox = document.createElement('p');
+					bodyBox.className = "theBody";
+					bodyBox.style.color = "#aaaaaa"
+					bodyBox.innerHTML = geemails[i].body;
+					subjectBox.appendChild(bodyBox);
+
+					var dateBox = document.createElement('div');
+					dateBox.className = "date";
+					dateBox.innerHTML = geemails[i].date;
+					wrapper.appendChild(dateBox);
+
+				}
+
+					function showEmail(){
+						var emailBody = this.querySelector(".theBody");
+						if (emailBody.style.display === "block"){
+							emailBody.style.display = "none";
+						}else{
+							emailBody.style.display = "block";
+						}
+				}
+
+	var newEmail = setInterval(genEmail, 3000);
+					
+	function genEmail(){
+	var newMail = getNewMessage()
+
+	var wrapper = document.createElement('div');
+		wrapper.className = "container";
+		allEmails.appendChild(wrapper);
+
+		var senderBox = document.createElement('div');
+		senderBox.className = "sender";
+		senderBox.innerHTML = newMail.sender;
+		wrapper.appendChild(senderBox);
+
+		var subjectBox = document.createElement('div');
+		subjectBox.className = "subject";
+		subjectBox.innerHTML = newMail.subject;
+		subjectBox.addEventListener('click', showEmail)
+		wrapper.appendChild(subjectBox);
+
+		var bodyBox = document.createElement('p');
+		bodyBox.className = "theBody";
+		bodyBox.style.color = "#aaaaaa"
+		bodyBox.innerHTML = newMail.body;
+		subjectBox.appendChild(bodyBox);
+
+		var dateBox = document.createElement('div');
+		dateBox.className = "date";
+		dateBox.innerHTML = newMail.date;
+		wrapper.appendChild(dateBox);
+
+		function showEmail(){
+						var emailBody = this.querySelector(".theBody");
+						if (emailBody.style.display === "block"){
+							emailBody.style.display = "none";
+						}else{
+							emailBody.style.display = "block";
+						}
+				}
+		
+		count.innerHTML++;
+	}
+}
+	/*
+	var senderBox = document.createElement('div');
+	senderBox.className = "sender";
+	senderBox.innerHTML = newMail.sender;
+	emailBox.appendChild(senderBox);
+
+	var nextEmailSubject = newMail.subject;
+	nextEmailSubject.className = "nextEmailSub";
+	allEmails.innerHTML += nextEmailSubject + "<br>";
+	
+	var nextEmailBody = newMail.body;
+	nextEmailBody.className = "nextEmailBod";
+	allEmails.innerHTML += nextEmailBody + "<br>";
+
+	var nextEmailDate = newMail.date;
+	nextEmailDate.className = "nextEmailD";
+	allEmails.innerHTML += nextEmailDate + "<br>";
+
+	count.innerHTML++;
+
+ */
+			
     </script>
 	</head>
 	<body>
-		<div class="container" id="main">
-			Build Me!
-		</div>
+			<header>
+					<i class="fas fa-bars">
+							<div class="container" id="main">
+									<div id="tooltipbars">
+										<div id="tooltiptextbars">Main menu</div>
+									</div>
+							</div>
+					</i>
+					<i class="far fa-envelope"></i>
+					<h2 id="topHeader">Gee-mail</h2>
+					<div id="topnav">
+						<input type="text" placeholder="Search mail">
+					</div>
+					<h2 id="acctSym">J</h2>
+					<i class="fas fa-th"></i>
+					<i class="far fa-question-circle"></i>
+			</header>
+			<br><br>
+			<hr class="topheader">
+			<section>
+					<aside>
+						<div id="compose">
+							<i class="fas fa-plus"></i>
+							<span class="composetext">Compose</span>
+						</div>	
+							<br><br>
+							<div class="sidebaricons">
+								<i class="fas fa-inbox"></i>
+							</div>
+								<span class="sidebartext">Inbox</span><span id="inboxCounter"></span>
+							</div>	
+							<br><br>
+							<div class="sidebaricons">
+								<i class="fas fa-star-of-david"></i>
+							</div>
+								<span class="sidebartext">Starred</span>
+								<br><br>
+								<div class="sidebaricons">
+										<i class="fas fa-clock"></i>
+									</div>
+										<span class="sidebartext">Snoozed</span>
+										<br><br>
+						<div class="sidebaricons">
+								<i class="fas fa-angle-double-right"></i>
+							</div>
+								<span class="sidebartext">Important</span>
+								<br><br>
+						<div class="sidebaricons">
+								<i class="fas fa-paper-plane"></i>
+							</div>
+								<span class="sidebartext">Sent</span>
+								<br><br>
+						<div class="sidebaricons">
+								<i class="fas fa-file"></i>
+							</div>
+								<span class="sidebartext">Drafts</span>
+								<br><br>
+						<div class="sidebaricons">
+								<i class="fas fa-folder"></i>
+							</div>
+								<span class="sidebartext">Categories</span>
+					</aside>
+					<i class="far fa-square"></i>
+					<i class="fas fa-sort-down"></i>
+					<i class="fas fa-redo"></i>
+					<i class="fas fa-ellipsis-v"></i>
+					<i class="fas fa-cog"></i>
+					<i class="fas fa-chevron-right"></i>
+					<i class="fas fa-chevron-left"></i>
+					<div id="emailCounter"></div>
+					<br>
+					<hr class="lineprimary">
+					<div id="primary">
+						<i class="fas fa-inbox"></i>
+					</div>
+						<span class="inboxes">Primary</span>
+					<div id="social">
+						<i class="fas fa-user-friends"></i>
+					</div>
+						<span class="inboxes">Social</span>
+					<div id="promotions">
+						<i class="fas fa-tag"></i>
+					</div>
+					<span class="inboxes">Promotions</span>
+			</section>
+			<br>
+			<hr class="lineemail">
+			<section>
+				<div id="allEmails">
+			</section>
 	</body>
 </html>
\ No newline at end of file