diff --git a/css/style.css b/css/style.css
index e69de29b..84e63d7d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,141 @@
+/* "." or full stop for class
+*/
+
+h1{
+	color: white;
+	background-color: blue;
+	padding: 8px;
+	font-family: "Arial Black", Gadget, sans-serif;
+	font-size: 50px;
+	font-variant: small-caps;
+	margin: 0px;
+}
+
+h2 {
+	margin-top: 10px;
+	margin-left: 20px;
+	margin-bottom: 10px;
+	font-family: "Arial", Gadget, sans-serif;
+	font-variant: small-caps;
+}
+
+h3{
+	margin-top: 10px;
+	margin-left: 20px;
+	margin-bottom: 10px;
+	font-family: "Arial", Gadget, sans-serif;
+	font-variant: small-caps;
+}
+
+h4{
+	margin-top: 10px;
+	margin-left: 20px;
+	margin-bottom: 10px;
+	font-family: "Arial", Gadget, sans-serif;
+	font-variant: small-caps;
+}
+
+table{
+	border-spacing: 0px;
+	background-color: transparent;
+	width: 100%
+}
+
+tr {
+
+}
+
+tr:hover{
+	background-color: navy;
+	color: white;
+}
+
+th{
+	text-align: left;
+	font-family: "Arial", Gadget, sans-serif;
+	font-weight: bold;
+	font-style: normal;
+	font-variant: small-caps;
+	font-size: 20px;
+	padding-top: 5px;
+	padding-bottom: 5px;
+	padding-left: 5px;
+	border-bottom-style: solid;
+	border-bottom-width: 2px;
+	border-bottom-color: black;
+}
+
+#select_header{
+	text-align: center;
+}
+
+td{
+	font-family: "Arial", Gadget, sans-serif;
+	padding-top: 8px;
+	padding-bottom: 8px;
+	padding-left: 15px;
+	border-bottom-style: solid;
+	border-bottom-width: 2px;
+	border-bottom-color: gray;
+}
+
+.delete_cell{
+	text-align: center;
+	padding: 0px;
+}
+
+.container{
+	display: grid;
+	grid-template-columns: 200px auto;
+	background-color: WhiteSmoke;
+	margin: 0px;
+	height: 100%;
+}
+
+#banner {
+	grid-column: 1 / span 2;
+}
+
+#navigation{
+	grid-column: 1
+	padding-top: 10px;
+	border-right: solid;
+	border-color: #00FFFF;
+	text-align: left;
+}
+
+#panel{
+	grid-column: 2;
+	overflow: hidden;
+}
+
+.navigation_button{
+	display: grid;
+	grid-template-columns: auto auto;
+	width: 95%;
+	text-align: left;
+	border-style: solid;
+	border-color: #E0FFFF;
+	border-radius: 0px 10px 10px 0px;
+	background-color: #E0FFFF;
+	font-size: 16px;
+	padding-left: 12px;
+	transition-duration: 0.2s;
+	margin-bottom: 10px;
+	cursor: pointer;
+}
+
+.navigation_button:hover{
+	border-color: white;
+	background-color: white;
+	color: black;
+}
+
+.nav_count{
+	display: inline;
+	text-align: right;
+}
+
+.message_body{
+	background-color: white;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index a8a1aad9..2021f5ca 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,225 @@
+<!DOCTYPE html>
 <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
+
+      	// Streamline, simplify, and condense. Adjust names for more accurate description.
+      	let panelTable = document.getElementById('message_table');
+      	let messageBodyToggle = [];
+
+      	window.setInterval(NewMessage, 10000);
+
+        DrawPanel(4);
+        document.getElementById('inbox').onclick = function(){DrawPanel(4)};
+        document.getElementById('delete').onclick = function(){DeleteMessages()};
         
-      };
+	    function DrawPanel(columns)
+	    {
+	    	if (panelTable.rows.length > 0)
+        	{
+        		for (let counter = panelTable.rows.length-1; counter >= 0; counter--)
+        		{
+        			panelTable.deleteRow(counter);
+        		}
+        		messageBodyToggle = [];
+        	}
+        	document.getElementsByClassName('nav_count')[0].innerHTML = geemails.length;
+        	for (let count = 0; count < geemails.length; count++){
+        		messageBodyToggle.push(false);
+        	}
+	    	const rowTotal = geemails.length + 1;
+			let cells = [];
+	    	// headers
+	    	const headerRow = panelTable.insertRow(0);
+        	for (let count = 0; count < columns; count++)
+        	{
+        		cells[count] = document.createElement("TH");
+        		cells[count].className = "table_header";
+        		headerRow.appendChild(cells[count]);
+        	}
+        	cells[0].innerHTML = "Date";
+        	cells[1].innerHTML = "Sender";
+        	cells[2].innerHTML = "Subject";
+        	cells[3].innerHTML = "Select";
+        	cells[3].id = "select_header"
+        	// messages
+        	for (let count = 1; count < rowTotal; count++)
+        	{
+        		DrawMessageRow(count, columns);
+        	}
+	    }
+
+	    function DrawMessageRow(position, columns)
+	    {
+		    const row = panelTable.insertRow(position);
+		    let gIndex;
+		    if (position == -1)
+		    {
+		    	gIndex = geemails.length - 1;
+		    } 
+		    else
+		    {
+		    	gIndex = position - 1;
+		    }
+		    //console.log(gIndex);
+		    row.id = "message_" + gIndex.toString();
+	        row.onclick = function(){ShowMessageBody(gIndex, row.id)}
+	        const cells = [];
+	        for (let count = 0; count < columns; count++)
+	        {
+	        	cells[count] = document.createElement("TD");
+	        	cells[count].className = "table_row";
+	        	row.appendChild(cells[count]);
+	        }
+	        cells[0].innerHTML = FormatMessageDate
+        	(
+				geemails[gIndex].date.getMonth(),
+				geemails[gIndex].date.getDate(),
+				geemails[gIndex].date.getFullYear(),
+				geemails[gIndex].date.getHours(),
+				geemails[gIndex].date.getMinutes()
+			);
+			cells[1].innerHTML = geemails[gIndex].sender;
+			cells[2].innerHTML = geemails[gIndex].subject;
+			const checkbox = document.createElement("INPUT");
+			checkbox.type = "checkbox";
+			checkbox.className = "delete_checkbox";
+			checkbox.onclick = function(){HandleCheckboxInput(event)};
+			cells[3].appendChild(checkbox);
+			cells[3].className = "delete_cell"
+        }
+
+		function FormatMessageDate(month, day, year, hours, minutes)
+		{
+			let formattedDate;
+			switch (month)
+			{
+				case 0:
+					formattedDate = "Jan";
+					break;
+				case 1:
+					formattedDate = "Feb";
+					break;
+				case 2:
+					formattedDate = "Mar";
+					break;
+				case 3:
+					formattedDate = "Apr";
+					break;
+				case 4:
+					formattedDate = "May";
+					break;
+				case 5:
+					formattedDate = "Jun";
+					break;
+				case 6:
+					formattedDate = "Jul";
+					break;
+				case 7:
+					formattedDate = "Aug";
+					break;
+				case 8:
+					formattedDate = "Sep";
+					break;
+				case 9:
+					formattedDate = "Oct";
+					break;
+				case 10:
+					formattedDate = "Nov";
+					break;
+				case 11:
+					formattedDate = "Dec";
+					break;
+				default:
+					formattedDate = "Bad Month";
+					break;
+        	}
+        	formattedDate += " ";
+        	formattedDate += day;
+        	formattedDate += ", ";
+        	formattedDate += year; 
+        	return formattedDate;
+		}
+
+		function ShowMessageBody(index, messageRowID)
+		{
+			//console.log("called ShowMessageBody");
+			//console.log(messageBodyToggle.length);
+			let x = document.getElementById(messageRowID);
+			if (messageBodyToggle[index] === false)
+			{
+				let bodyRow = panelTable.insertRow(x.rowIndex+1);
+				bodyRow.className = "message_body";
+				bodyRow.id = "message_body_" + index;
+				let singleCell = bodyRow.insertCell(0);
+				singleCell.colSpan = 3;
+				singleCell.innerHTML = geemails[index].body;
+				messageBodyToggle[index] = true;
+			} 
+			else 
+			{
+				let y = document.getElementById("message_body_" + index);
+				panelTable.deleteRow(y.rowIndex);
+				messageBodyToggle[index] = false;
+			}
+		}
+
+		function HandleCheckboxInput(event){
+			event.stopPropagation();
+		}
+
+		function NewMessage()
+		{
+			if (geemails.length < 30)
+			{
+				geemails.push(getNewMessage());
+				messageBodyToggle.push(false);
+				DrawMessageRow(-1, 4);
+				document.getElementsByClassName('nav_count')[0].innerHTML = geemails.length;
+			}
+		}
+
+		function DeleteMessages()
+		{
+			let checkboxes = document.getElementsByClassName('delete_checkbox');
+			let arr = [];
+			for (count = 0; count < checkboxes.length; count++)
+			{
+				if (!checkboxes[count].checked)
+				{
+					arr.push(geemails[count]);
+				}
+			}
+			geemails = arr;
+			document.getElementsByClassName('nav_count')[0].innerHTML = geemails.length;
+			DrawPanel(4);
+		}
+
+    };
     </script>
 	</head>
 	<body>
 		<div class="container" id="main">
-			Build Me!
+			<div id = "banner">
+				<h1>GeeMail</h1>
+			</div>
+			<div id = "navigation">
+				<h2>Navigation</h2>
+				<button class = "navigation_button" id = "inbox">
+					Inbox
+					<div class = "nav_count"></div>
+				</button>
+				<button class = "navigation_button" id = "delete">
+					Delete Selected
+				</button>
+			</div>
+			<div id = "panel">
+				<table id = "message_table">
+				</table>
+			</div>	
 		</div>
 	</body>
 </html>
\ No newline at end of file
