diff --git a/css/style.css b/css/style.css
index e69de29b..0ec8ea91 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,61 @@
+body{
+    color: black);
+    font-family: 'Raleway', sans-serif;
+    background-image: linear-gradient(to bottom right, #d9a7c7, #fffcdc);
+    background-attachment: fixed;
+}
+
+.header{
+    display: inline-block;
+    padding: 5px;
+}
+
+.inner{
+    display: none;
+    color: #67536c;
+}
+
+.body{
+    display: none;
+}
+
+.boxCount{
+    color: #fffcdc;
+    font-style: bold;
+}
+
+header{
+    color: #fffcdc;
+    font-family: 'Montserrat', sans-serif;
+    background-color: #6C5363;
+    margin: 0px;
+    padding: 10px;
+    padding-left: 20px;
+}
+
+.msgDiv{
+    border-bottom: 1px grey solid;
+    /* background-color: #ffffff %; */
+    margin-left: 200px;
+}
+
+/* Left column */
+.column {
+    float: left;
+    width: 10%;
+    padding: 10px;
+  }
+  
+  /* Right column */
+  .column.middle {
+    float:left;
+    width: 75%;
+  }
+
+  form{
+      display: inline;
+  }
+
+  .search-container{
+      background-color:#6C5363;
+  }
\ No newline at end of file
diff --git a/index.html b/index.html
index a8a1aad9..221387bb 100644
--- a/index.html
+++ b/index.html
@@ -2,17 +2,144 @@
 	<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=Lora|Montserrat|Raleway&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
-        
-      };
-    </script>
+				// 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
+
+// Inbox counter:
+var counter = document.createElement('div');
+	counter.className = 'boxCount';
+	counter.innerHTML = geemails.length;
+	inbCounter.appendChild(counter);
+
+
+// For loops to show all emails by date, sender, subject and body				
+for (var i = 0; i<geemails.length; i++){
+
+var emailBox = document.createElement('div');
+emailBox.className = 'msgDiv';
+document.body.appendChild(emailBox);
+
+var senderBox = document.createElement('div');
+senderBox.className = 'header';
+senderBox.innerHTML = geemails[i].sender;
+emailBox.appendChild(senderBox);
+
+var subjectBox = document.createElement('div');
+subjectBox.className = 'header';
+subjectBox.innerHTML = geemails[i].subject;
+emailBox.appendChild(subjectBox);
+
+var dateBox = document.createElement('div');
+dateBox.className = 'header';
+dateBox.innerHTML = geemails[i].date;
+emailBox.appendChild(dateBox);
+
+var bodyBox = document.createElement('div');
+bodyBox.className = 'inner';
+bodyBox.innerHTML = geemails[i].body;
+subjectBox.appendChild(bodyBox);
+}
+
+
+// grab by class
+var contentBox = document.getElementsByClassName('msgDiv');
+
+
+// add event
+for (var i = 0; i<contentBox.length; i++){
+	contentBox[i].addEventListener('click', showContents);
+}
+
+
+// add function
+function showContents(){
+	var contents = this.querySelector('.inner');
+	if(contents.style.display === 'block'){contents.style.display = 'none';
+  }else{
+  contents.style.display = 'block';
+  }
+}
+	
+
+// Generation of new emails:
+
+setInterval(function(){
+
+var msg = getNewMessage();
+
+var msgBox = document.createElement('div');
+	msgBox.className = 'msgDiv';
+	msgBox.addEventListener('click', showContents);
+	document.body.appendChild(msgBox);
+
+	var newBox1 = document.createElement('div');
+	newBox1.className = 'header';
+	newBox1.innerHTML = msg.sender;
+	msgBox.appendChild(newBox1);
+
+	var newBox2 = document.createElement('div');
+	newBox2.className = 'header';
+	newBox2.innerHTML = msg.subject;
+	msgBox.appendChild(newBox2);
+
+	var newBox3 = document.createElement('div');
+	newBox3.className = 'header';
+	newBox3.innerHTML = msg.date;
+	msgBox.appendChild(newBox3);
+
+	var newBox4 = document.createElement('div');
+	newBox4.className = 'inner';
+	newBox4.innerHTML = msg.body;
+	msgBox.appendChild(newBox4);
+
+counter.innerHTML = ++geemails.length;
+
+function showContents(){
+	var contents2 = this.querySelector('.inner');
+	if(contents2.style.display === 'block'){contents2.style.display = 'none';
+	}else{
+  	contents2.style.display = 'block';
+  }
+}
+
+}, 3000);
+
+
+};
+
+  </script>
+
+<script src="https://kit.fontawesome.com/e6e0074297.js"></script>
+
 	</head>
 	<body>
-		<div class="container" id="main">
-			Build Me!
-		</div>
+
+		<header>
+		<h1>GeeMail</h1>
+<div class="search-container">
+	<form action="/action_page.php">
+		<input type="text" placeholder="Search.." name="search">
+		<button type="submit"><i class="fa fa-search"></i></button>
+	</form>
+</div>
+
+</header>
+
+<div id="parent">
+    <div class="column">
+      <p class="menu" id='inbCounter'><i class="fas fa-inbox"></i>  
+		Inbox</p>
+      <p class="menu"><i class="fas fa-paper-plane"></i>  Sent</p>
+      <p class="menu"><i class="far fa-edit"></i>  Drafts</p>
+    </div>
+    <div class="column.middle">
+      <p class="menu">
+	  </p>
+	</div>
+</div>
+
 	</body>
 </html>
\ No newline at end of file
