diff --git a/punch_list/css/custom.css b/punch_list/css/custom.css
index 785b700..3de4566 100644
--- a/punch_list/css/custom.css
+++ b/punch_list/css/custom.css
@@ -22,7 +22,7 @@ textarea {
   .twelve.columns                 { width: 100%; margin-left: 0; }
 #newEvent {
 	display: none;}
-#editEvent {
+#editPunch {
 	display: none; }
 .punchlist {
 	position: relative;
diff --git a/punch_list/eventManage.js b/punch_list/eventManage.js
index 0193832..e873a87 100644
--- a/punch_list/eventManage.js
+++ b/punch_list/eventManage.js
@@ -85,12 +85,12 @@ function genList(punchList) {
 		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='container " + itemStyle + "' onClick=enablePunchDetail(" + i + ")><span class=subject>" + punchList[i].subject + "</span></div>"; //
-					list += "<div class='two columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
+					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>";
 					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 class='four columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</div>";
 				list += "</div>";
 				list += "<div class='two columns'>";
 					list += "<div class=dropdown>";
@@ -113,12 +113,12 @@ function genList(punchList) {
 		if (showDone === true) {
 			if (punchList[i].progress.toLowerCase() === "done") {
 				console.log(`show done.`);
-			list += "<div class='punchlist top-bottom-border'>"; //
+			list += "<div class='punchlist container 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='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>";
 					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 class='four columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</div>";
 				list += "</div>";
 				list += "<div class='two columns'>";
 					list += "<div class=dropdown>";
@@ -247,3 +247,46 @@ function toggleShowDone() {
 	getJson(genList);
 }
 
+function editPunch(item) {
+	disableElement("newEvent");
+	disableElement("punchList");
+	enableElement("editPunch");
+
+	punchList = window.punches;
+
+	var id = item;
+
+	var subject = punchList[id].subject;
+	var priority = punchList[id].priority;
+	var progress = punchList[id].progress;
+	var nDate = punchList[id].nDate;
+	var notes = punchList[id].notes;
+
+	document.getElementById("editID").value = id;
+	document.getElementById("editSubject").value = subject;
+	document.getElementById("timepickerEdit").value = nDate;
+	document.getElementById("editNotes").value = notes;
+	document.getElementById("editProgress").value = progress;
+	document.getElementById("editPriority").value = priority;
+}
+
+function submitEditPunch() {
+	punchList = window.punches;
+
+	var id = document.getElementById("editID").value;
+	var subjectField = document.getElementById("editSubject").value;
+	var priorityField = document.getElementById("editPriority").value;
+	var progressField = document.getElementById("editProgress").value;
+	var nDateField = document.getElementById("timepickerEdit").value;
+	var notesField = document.getElementById("editNotes").value;
+
+	punchList[id].subject = subjectField;
+	punchList[id].priority = priorityField;
+	punchList[id].progress = progressField;
+	punchList[id].nDate = nDateField;
+	punchList[id].notes = notesField;
+
+	jsonStr = JSON.stringify(punchList);
+	putJson(jsonStr);
+	disableElement("editPunch");
+}
diff --git a/punch_list/index.html b/punch_list/index.html
index d282174..3ae521f 100644
--- a/punch_list/index.html
+++ b/punch_list/index.html
@@ -31,13 +31,15 @@
 			<button class="button" href="https://thelinux.pro/broadcast_timer">Time Boxer</button>
 		</div>
 
-		<div class="row" id="editEvent">
+		<div class="row" id="editPunch">
 				<input type=hidden id=editID>
 				<input class="u-full-width" type="text" id="editSubject" value=""><br />
+				<input class="u-full-width" type="text" id="editPriority" value=""><br />
+				<input class="u-full-width" type="text" id="editProgress" READONLY><br />
 				<input type='text' id='timepickerEdit' class='datepicker-here u-full-width' data-timepicker='true' data-language='en'><br />
 				<!-- <input type="text" id="editStartDate" value=""> -->
 				<textarea class="u-full-width" id="editNotes" value=""></textarea>
-				<input class="u-full-width" onClick="submitEditEvent()" id="test" type="button" value="Update" />
+				<input class="u-full-width" onClick="submitEditPunch()" id="test" type="button" value="Update" />
 		</div>
 		<div class="container row" id="newEvent">
 				<form id="newEventForm" onSubmit="return processEventForm(this.form)">