diff --git a/punch_list/css/custom.css b/punch_list/css/custom.css
index 5c9d76c..e376ea5 100644
--- a/punch_list/css/custom.css
+++ b/punch_list/css/custom.css
@@ -11,6 +11,18 @@ textarea {
 	display: none;}
 #editEvent {
 	display: none; }
+.punchlist {
+	position: relative;
+	width: 100%;
+	display: table;
+	border-top: 1px solid #eee;
+	border-bottom: 1px solid #eee; }
+.punchlist::after {
+	content: "";
+	clear: both; }
+.top-bottom-border {
+		border-top: 1px solid #eee;
+		border-bottom: 1px solid #eee; }
 .navbar {
   overflow: hidden;
   background-color: #333;
@@ -33,6 +45,7 @@ textarea {
 
 .dropdown .dropbtn {
   cursor: pointer;
+	vertical-align: middle;
   font-size: 16px;
   border: none;
   outline: none;
@@ -113,18 +126,15 @@ table.punches {
   padding: 5px;
   margin-bottom: 0px; }
 .centerMiddle {
-	height: 100%;
-	width: 100%;
 	padding:0px;
 	text-align: center;
-	vertical-align: center;
-	margin-top: 50%; }
+	vertical-align: middle; }
 .button {
 	display: block;
 	padding: 0px;
 	text-align: center;
 	text-decoration: none;
-	font-size: 2rem;
+	font-size: 1.5rem;
 	vertical-align: middle;
   border: 1px solid #333;
   background-color:  #4CAF50;
@@ -133,7 +143,7 @@ table.punches {
 	margin-left: auto;
 	margin-right: auto;
   width: 98%;
-  height: 70px;}
+  height: 50px;}
 .nav-button {
 	vertical-align: middle;
   float: right }
@@ -159,13 +169,19 @@ table.punches {
 @media (min-width: 550px) {
   .button {
 		padding: 0px;
+		text-align: center;
+		text-decoration: none;
+		font-size: 1rem;
 		vertical-align: middle;
-    border: 1px solid #333;
-    background-color:  #4CAF50;
-    margin-top: 10px;
-    margin-bottom: 0px;
-		width: 150px;
-    height: 45px; }
+		border: 1px solid #333;
+		background-color:  #4CAF50;
+		margin-top: auto;
+		margin-bottom: auto;
+		margin-left: auto;
+		margin-right: auto;
+		width: 20%;
+		height: 40px;
+		float: right;}
   .nav-button {
 		vertical-align: middle;
     float: right }
diff --git a/punch_list/eventManage.js b/punch_list/eventManage.js
index 8060e73..6860e34 100644
--- a/punch_list/eventManage.js
+++ b/punch_list/eventManage.js
@@ -39,7 +39,8 @@ function getJson(callback) {
 }
 
 function genList(punchList) {
-	console.log(`inside gen list `);
+	document.getElementById("showDone").innerHTML = "Show Done: <a href='#' onClick='toggleShowDone()'>" + showDone + "</a>";
+
 	disableElement("punchDetail");
 	enableElement("punchList");
 	var itemStyle = "punches";
@@ -48,13 +49,94 @@ function genList(punchList) {
 //	punchList.sort(function(a, b){return new Date(a.date).getTime() - new Date(b.date).getTime()});
 	listLength = punchList.length;
 
-	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 = "<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
 	for (i = 0; i < listLength; i++) {
-		list += "<tr><td onClick=enablePunchDetail(" + i + ") class=" + itemStyle + ">" + punchList[i].subject + "</td><td class=" + itemStyle + ">" + punchList[i].progress + "</td><td class=" + itemStyle + ">" + punchList[i].priority + "</td><td><div class=dropdown><button class=dropbtn onClick=dropMenu(" + i + ")>Act<i class='fa fa-caret-down'></i></button><div class=dropdown-content id='myDropdown" + i + "'><a onClick=startPunch(" + i + ")>start</a><a onClick=completePunch(" + i + ")>done</a><a onClick=editPunch(" + i + ")>edit</a><a onClick=deletePunch(" + i + ")>delete</a></div></div></div></td></tr>";
+		if (punchList[i].progress.toLowerCase() === "in progress") {
+			console.log(`in progress`);
+//			list += "<tr>";
+			list += "<div class='punchlist top-bottom-border'>"; //
+				list += "<div class='ten columns'>";
+					list += "<div class='container " + itemStyle + "' onClick=enablePunchDetail(" + i + ")>" + punchList[i].subject + "</div>"; //
+					list += "<div class='two columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
+					list += "<div class='two columns " + itemStyle + "'>Priority: " + punchList[i].priority + "</div>";
+					list += "<div class='three columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</div>";
+				list += "</div>";
+				list += "<div class='two columns'>";
+					list += "<div class=dropdown>";
+						list += "<button class=dropbtn onClick=dropMenu(" + i + ")>Act<i class='fa fa-caret-down'></i></button>";
+						list += "<div class=dropdown-content id='myDropdown" + i + "'>";
+							list += "<a onClick=startPunch(" + i + ")>start</a>";
+							list += "<a onClick=completePunch(" + i + ")>done</a>";
+							list += "<a onClick=editPunch(" + i + ")>edit</a>";
+							list += "<a onClick=deletePunch(" + i + ")>delete</a>";
+						list += "</div>";
+					list += "</div>";
+				list += "</div>";
+				list += "</div>";
+		}
 	}
 
-	list += "</table>";
+// then !done
+	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='ten columns'>";
+					list += "<div class='container " + itemStyle + "' onClick=enablePunchDetail(" + i + ")>" + punchList[i].subject + "</div>"; //
+					list += "<div class='two columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
+					list += "<div class='two columns " + itemStyle + "'>Priority: " + punchList[i].priority + "</div>";
+					list += "<div class='three columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</div>";
+				list += "</div>";
+				list += "<div class='two columns'>";
+					list += "<div class=dropdown>";
+						list += "<button class=dropbtn onClick=dropMenu(" + i + ")>Act<i class='fa fa-caret-down'></i></button>";
+						list += "<div class=dropdown-content id='myDropdown" + i + "'>";
+							list += "<a onClick=startPunch(" + i + ")>start</a>";
+							list += "<a onClick=completePunch(" + i + ")>done</a>";
+							list += "<a onClick=editPunch(" + i + ")>edit</a>";
+							list += "<a onClick=deletePunch(" + i + ")>delete</a>";
+						list += "</div>";
+					list += "</div>";
+				list += "</div>";
+				list += "</div>";
+			}
+		}
+	}
+
+// then done
+	for (i = 0; i < listLength; i++) {
+		if (showDone === true) {
+			if (punchList[i].progress.toLowerCase() === "done") {
+				console.log(`show done.`);
+			list += "<div class='punchlist top-bottom-border'>"; //
+				list += "<div class='ten columns'>";
+					list += "<div class='container " + itemStyle + "' onClick=enablePunchDetail(" + i + ")>" + punchList[i].subject + "</div>"; //
+					list += "<div class='two columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
+					list += "<div class='two columns " + itemStyle + "'>Priority: " + punchList[i].priority + "</div>";
+					list += "<div class='three columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</div>";
+				list += "</div>";
+				list += "<div class='two columns'>";
+					list += "<div class=dropdown>";
+						list += "<button class=dropbtn onClick=dropMenu(" + i + ")>Act<i class='fa fa-caret-down'></i></button>";
+						list += "<div class=dropdown-content id='myDropdown" + i + "'>";
+							list += "<a onClick=startPunch(" + i + ")>start</a>";
+							list += "<a onClick=completePunch(" + i + ")>done</a>";
+							list += "<a onClick=editPunch(" + i + ")>edit</a>";
+							list += "<a onClick=deletePunch(" + i + ")>delete</a>";
+						list += "</div>";
+					list += "</div>";
+				list += "</div>";
+				list += "</div>";
+			}
+		}
+	}
+
+			list += "</div>";
 	document.getElementById("punchList").innerHTML = list;
 }
 
@@ -153,3 +235,15 @@ window.onclick = function(e) {
     }
   }
 }
+
+function toggleShowDone() {
+	if (showDone === false) {
+		window.showDone = true;
+	} else if (showDone === true) {
+		window.showDone = false;
+	} else {
+		window.showDone = false;
+	}
+	getJson(genList);
+}
+
diff --git a/punch_list/index.html b/punch_list/index.html
index 2994031..d282174 100644
--- a/punch_list/index.html
+++ b/punch_list/index.html
@@ -25,11 +25,11 @@
 
 	<body onLoad="getJson(genList)">
 
-		<div class="u-full-width u-max-full-width container row">
+		<div class="column">
 			<button class="button" onClick="disableElement('punchList'), disableElement('punchDetail'), enableElement('newEvent')" id="put">New Punch Item</button>
 			<button class="button" onClick="getJson(genList)" id="getJson">Refresh</button>
 			<button class="button" href="https://thelinux.pro/broadcast_timer">Time Boxer</button>
-		</div><br />
+		</div>
 
 		<div class="row" id="editEvent">
 				<input type=hidden id=editID>
@@ -56,6 +56,7 @@
 		<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>
 	</body>
 </html>
diff --git a/punch_list/metadata.js b/punch_list/metadata.js
index a9c5793..7cf0a40 100644
--- a/punch_list/metadata.js
+++ b/punch_list/metadata.js
@@ -1,6 +1,7 @@
-var version = "0.0.231",
+var version = "0.1.302",
 		debug = false,
 		jsonUrl = "https://api.myjson.com/bins/1dodsj",
+		showDone = false,
 		items,
 		item,
 		notes,