diff --git a/assests/kisspng-g-suite-gmail-computer-icons-google-email-e-mail-5ad074ba7e8a91.7988519415236108105183.png b/assests/kisspng-g-suite-gmail-computer-icons-google-email-e-mail-5ad074ba7e8a91.7988519415236108105183.png
new file mode 100644
index 00000000..f60f1ac5
Binary files /dev/null and b/assests/kisspng-g-suite-gmail-computer-icons-google-email-e-mail-5ad074ba7e8a91.7988519415236108105183.png differ
diff --git a/css/style.css b/css/style.css
index e69de29b..9acf475d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,90 @@
+html{
+    font-size: 1px;
+    background-color: white;
+    font-family: 'Raleway', sans-serif;
+}
+
+body{
+    margin: 0;
+}
+
+h1{
+    font-size: 10em;
+    position: relative;
+    left: 46;
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+
+#inbox{
+    display: inline;
+}
+
+#main{
+    background-color: #DCDCDC;
+    overflow-y: scroll;
+    width:90%;
+    height: 92%;
+    float: right;
+}
+
+#mailIcon{
+    height: 7em;
+    width: 7em;
+    position: absolute;
+    left: 8;
+    top: 27;
+}
+
+#sideBar{
+    float: left;
+    font-size: 20em;
+    position: relative;
+    width: 6.3em;
+    left: 8;
+    top: 10;
+}
+
+#spamSite{
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+#title{
+    font-size: 5em;
+    border-bottom: 1px black solid;
+}
+
+.date{
+    float: right;
+    font-size: 3em;
+    position: relative;
+    left: 12;
+    bottom: 10;
+}
+
+.msgBody{
+    font-size: 3.5em;
+    position: relative;
+    bottom: 9;
+}
+
+.msgBox{
+    margin: 0;
+    padding: 3em;
+    border: 1px solid black;
+    font-size: 5em;
+    padding-bottom: 1em;
+}
+
+.sender{
+    font-size: 5em;
+    padding-bottom: 8px;
+}
+
+.subject{
+    font-size: 3em;
+    position: relative;
+    bottom: 11;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index a8a1aad9..6a17bc55 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,156 @@
 <html>
 	<head>
+		<title>Gee-Mail</title>
 		<script src="js/mail-generator.js"></script>
 		<link href="css/style.css" rel="stylesheet" media="screen">
+		<link href="https://fonts.googleapis.com/css?family=Raleway:200,400&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
+				var date;
+				var subject;
+				var sender;
+				var msgBody;
+				var newMsg;
+				var count = 0;
+				makeMsgBox(geemails);
+				//counter
+				document.getElementById('count').addEventListener('onchange', counter);
+				function counter(){
+					document.getElementById('count').innerHTML = count;
+				}
+				
+				//timer function
+				var timerId = setInterval(function(){
+					newMsg = getNewMessage()
+					//msg box
+					msgBox = makeBox();
+					msgBox.style.display = 'block';
+					main.prepend(msgBox);
+					//date
+					date = makeElem('div', 'date', 'Date', newMsg.date);
+					msgBox.appendChild(date);
+					//sender
+					sender = makeElem('div', 'sender', 'Sender', newMsg.sender);
+					msgBox.appendChild(sender);
+					//subject
+					subject = makeElem('div', 'subject', 'Subject', newMsg.subject);
+					msgBox.appendChild(subject);
+					//msgBody
+					msgBody = makeElem('div', 'msgBody', 'Body', newMsg.body);
+					msgBody.style.display = 'none';
+					//show/hide body
+					msgBox.addEventListener('click', showBody);
+					msgBox.appendChild(msgBody);
+					//change count
+					count++;
+					document.getElementById('count').innerHTML = count;
+				}, 10000);
+
+
+				//msgBox container function
+				function makeMsgBox(list){	
+					for(var i = 0, n = list.length; i < n; i++){
+						//msgBox for click event
+						msgBox = makeBox();
+						msgBox.style.display = 'block';
+						main.appendChild(msgBox);
+						//date
+						date = makeElem('div', 'date', 'Date', list[i].date);
+						msgBox.appendChild(date);
+						//sender
+						sender = makeElem('div', 'sender', 'Sender', list[i].sender);
+						msgBox.appendChild(sender);
+						//subject
+						subject = makeElem('div', 'subject', 'Subject', list[i].subject);
+						msgBox.appendChild(subject);
+						//msgBody
+						msgBody = makeElem('div', 'msgBody', 'Body', list[i].body);
+						msgBody.style.display = 'none';
+						msgBox.appendChild(msgBody);
+						//show/hide body
+						msgBox.addEventListener('click', showBody);
+						//change count
+						count++;
+						document.getElementById('count').innerHTML = count;
+					}
+				}
+
+				//function to open and close "body"
+				function showBody(){
+					if(this.querySelector('.msgBody').style.display === 'none'){
+						this.querySelector('.msgBody').style.display = 'block';
+					} else {
+						this.querySelector('.msgBody').style.display = 'none';
+					}
+				}
+
+				//make element function
+				function makeElem(elem, label, prefix, info){
+					var elemBox = document.createElement(elem);
+					elemBox.className = label;
+					elemBox.innerHTML = prefix + ': ' + info;
+  				return elemBox;
+				}
+				//make msg box function
+				function makeBox(){
+					var box = document.createElement('div');
+					box.className = 'msgBox'
+					return box;
+				}
+				
+				//random functionality
+				var idSpam = document.getElementById('spamSite');
+				var msgBoxes = document.getElementsByClassName('msgBox');
+				document.getElementById('spam').addEventListener('click', showSpam);
+				function showSpam(){
+					for(var i = 0; i < msgBoxes.length; i++){
+						if(msgBoxes[i].style.display === 'block'){
+							msgBoxes[i].style.display = 'none';
+						}
+					}
+					if(idSpam.style.display === 'none'){
+						idSpam.style.display = 'block';
+					}
+				}
+
+				document.getElementById('inbox').addEventListener('click', showInbox);
+				function showInbox(){
+					for(var i = 0; i < msgBoxes.length; i++){
+						if(msgBoxes[i].style.display === 'none'){
+							msgBoxes[i].style.display = 'block';
+						}
+					}
+					if(idSpam.style.display === 'block'){
+						idSpam.style.display = 'none';
+					}
+				}
+
+			}
     </script>
 	</head>
 	<body>
-		<div class="container" id="main">
-			Build Me!
+		<header>
+			<div id="title">
+				<h1>Gee-Mail</h1>
+				<img src="assests/kisspng-g-suite-gmail-computer-icons-google-email-e-mail-5ad074ba7e8a91.7988519415236108105183.png" alt="" id="mailIcon">
+			</div>
+			<div class="content">
+			</div>
+		</header>
+		<div id='sideBar'>
+			<div id="inbox">
+				Inbox [<span id="count"></span>]
+			</div>
+			<div class="important">Important</div>
+			<div class="sent">Sent</div>
+			<div id="spam">Spam</div>
+		</div>
+		<div class="container" id="main" style="display: block">
+				<iframe id='spamSite' style="display: none" src="https://www.spam.com/" width="555" height="200">
+
+			 </iframe>
 		</div>
 	</body>
 </html>
\ No newline at end of file
