diff --git a/punch_list/css/custom.css b/punch_list/css/custom.css
index 3de4566..05ea465 100644
--- a/punch_list/css/custom.css
+++ b/punch_list/css/custom.css
@@ -7,19 +7,31 @@ textarea {
 	height:50%;
 	color: lime;
 	border: 1px solid #999; }
-  .one.column,
-  .one.columns                    { width: 4.66666666667%; }
-  .two.columns                    { width: 13.3333333333%; }
-  .three.columns                  { width: 22%;            }
-  .four.columns                   { width: 30.6666666667%; }
-  .five.columns                   { width: 39.3333333333%; }
-  .six.columns                    { width: 48%;            }
-  .seven.columns                  { width: 56.6666666667%; }
-  .eight.columns                  { width: 65.3333333333%; }
-  .nine.columns                   { width: 74.0%;          }
-  .ten.columns                    { width: 82.6666666667%; }
-  .eleven.columns                 { width: 91.3333333333%; }
-  .twelve.columns                 { width: 100%; margin-left: 0; }
+.listWrapper:after {
+	content: "";
+	clear: both; }
+.listWrapper {
+	margin: 5px;
+	margin-bottom: 10px;
+	border: 1px solid #999; }
+.punchListHeader {
+	color: #00bfff;
+	padding: 4px;
+	font-size: 2rem;
+	font-weight: 999; }
+	.one.column,
+	.one.columns                    { width: 4.66666666667%; }
+	.two.columns                    { width: 13.3333333333%; }
+	.three.columns                  { width: 22%;            }
+	.four.columns                   { width: 30.6666666667%; }
+	.five.columns                   { width: 39.3333333333%; }
+	.six.columns                    { width: 48%;            }
+	.seven.columns                  { width: 56.6666666667%; }
+	.eight.columns                  { width: 65.3333333333%; }
+	.nine.columns                   { width: 74.0%;          }
+	.ten.columns                    { width: 82.6666666667%; }
+	.eleven.columns                 { width: 91.3333333333%; }
+	.twelve.columns                 { width: 100%; margin-left: 0; }
 #newEvent {
 	display: none;}
 #editPunch {
diff --git a/punch_list/eventManage.js b/punch_list/eventManage.js
index e873a87..491d34d 100644
--- a/punch_list/eventManage.js
+++ b/punch_list/eventManage.js
@@ -42,7 +42,7 @@ function genList(punchList) {
 	document.getElementById("showDone").innerHTML = "Show Done: <a href='#' onClick='toggleShowDone()'>" + showDone + "</a>";
 
 	disableElement("punchDetail");
-	enableElement("punchList");
+	enableElement("punchListAll");
 	var itemStyle = "punches";
 	isItArray(punchList);
 
@@ -52,12 +52,13 @@ function genList(punchList) {
 //	list = "<table id=punchListTable class=punches><th class=punches>Punch Item</th><th class=punches>Status</th><th class=punches>Priority</th><th>Action</th>";
 
 
-			list = "<div class='punchlist top-bottom-border'>"; //
 //prioritize in-progress
+	var list = '';
 	for (i = 0; i < listLength; i++) {
 		if (punchList[i].progress.toLowerCase() === "in progress") {
 			console.log(`in progress`);
 //			list += "<tr>";
+			list += "<div class='punchlist top-bottom-border'>"; //
 			list += "<div class='punchlist container top-bottom-border'>"; //
 				list += "<div class='ten columns'>";
 					list += "<div class='12 columns " + itemStyle + "' onClick=enablePunchDetail(" + i + ")><span class=subject>" + punchList[i].subject + "</span></div>"; //
@@ -77,14 +78,18 @@ function genList(punchList) {
 					list += "</div>";
 				list += "</div>";
 				list += "</div>";
+			list += "</div>";
+			document.getElementById("punchListInProgress").innerHTML = list;
 		}
 	}
 
 // then !done
+	var list = '';
 	for (i = 0; i < listLength; i++) {
 		if (punchList[i].progress.toLowerCase() != "in progress") {
 			if (punchList[i].progress.toLowerCase() != "done") {
 				console.log(`not in progress or not done`);
+			list += "<div class='punchlist top-bottom-border'>"; //
 			list += "<div class='punchlist container top-bottom-border'>"; //
 				list += "<div class='ten columns'>";
 					list += "<div class='12 columns " + itemStyle + "' onClick=enablePunchDetail(" + i + ")><span class=subject>" + punchList[i].subject + "</span></div>"; //
@@ -104,16 +109,21 @@ function genList(punchList) {
 					list += "</div>";
 				list += "</div>";
 				list += "</div>";
+				list += "</div>";
+				document.getElementById("punchListNew").innerHTML = list;
 			}
 		}
 	}
 
 // then done
+	var list = '';
 	for (i = 0; i < listLength; i++) {
 		if (showDone === true) {
+			enableElement("punchListDoneWrapper");
 			if (punchList[i].progress.toLowerCase() === "done") {
 				console.log(`show done.`);
-			list += "<div class='punchlist container top-bottom-border'>"; //
+				list += "<div class='punchlist top-bottom-border'>"; //
+				list += "<div class='punchlist container top-bottom-border'>"; //
 				list += "<div class='ten columns'>";
 					list += "<div class='12 columns " + itemStyle + "' onClick=enablePunchDetail(" + i + ")><span class=subject>" + punchList[i].subject + "</span></div>"; //
 					list += "<div class='three columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
@@ -132,12 +142,13 @@ function genList(punchList) {
 					list += "</div>";
 				list += "</div>";
 				list += "</div>";
+				list += "</div>";
+				document.getElementById("punchListDone").innerHTML = list;
 			}
+		} else {
+			disableElement("punchListDoneWrapper");
 		}
 	}
-
-			list += "</div>";
-	document.getElementById("punchList").innerHTML = list;
 }
 
 function startPunch(item) {
@@ -159,7 +170,7 @@ function completePunch(item) {
 function enablePunchDetail(item) {
 	var punchList = window.punches;
 	console.log(`inside enablePunchDetail`);
-	disableElement("punchList");
+	disableElement("punchListAll");
 	console.log(`punchList Disabled`);
 	enableElement("punchDetail");
 	console.log(`punchDetail Enabled`);
@@ -186,7 +197,7 @@ function createNewEvent() {
 	jsonStr = JSON.stringify(punchList);
 	putJson(jsonStr);
 	disableElement("newEvent");
-	enableElement("punchList");
+	enableElement("punchListAll");
 //	document.getElementById("newEventList").innerHTML = jsonStr;
 }
 
@@ -249,7 +260,7 @@ function toggleShowDone() {
 
 function editPunch(item) {
 	disableElement("newEvent");
-	disableElement("punchList");
+	disableElement("punchListAll");
 	enableElement("editPunch");
 
 	punchList = window.punches;
diff --git a/punch_list/index.html b/punch_list/index.html
index 3ae521f..676cf06 100644
--- a/punch_list/index.html
+++ b/punch_list/index.html
@@ -47,16 +47,32 @@
 					<input class="u-full-width" type="text" id="newPriority" value="priority">
 					<input type="hidden" id="newProgress" value="new">
 					<input type='text' id='timepickerCreate' class='datepicker-here u-full-width' data-timepicker='true' data-language='en' value="date">
-					<!-- <div class="datepicker-here" data-timepicker="true" data-language='en'></div> -->
-
-					<!-- <input type="text" id="newStartDate" value="June 04, 2019 00:00:00"> -->
 					<textarea class="u-full-width" id="newNotes" value="Notes"></textarea>
 					<input class="u-full-width" onClick="createNewEvent()" id="test" type="button" value="Update" />
 				</form>
 		</div>
-		<div id="punchList"></div>
+
+		<div id="punchListAll">
+			<div id="punchListInProgressWrapper" class="listWrapper">
+			<span class="punchListHeader">In Progress</span>
+				<div id="punchListInProgress"></div>
+			</div>
+
+			<div id="punchListNewWrapper" class="listWrapper">
+			<span class="punchListHeader">New</span>
+				<div id="punchListNew"></div>
+			</div>
+
+			<div id="punchListDoneWrapper" class="listWrapper">
+			<span class="punchListHeader">Done</span>
+				<div id="punchListDone"></div>
+			</div>
+		</div>
+
 		<div id="punchDetail"></div>
 
+
+
 		<p id="result"></p>
 		<div id="showDone" class="grid-meta u-pull-right"></div><br />
 		<div id="meta" class="grid-meta u-pull-right"></div>