diff --git a/README.md b/README.md
index 5e76f2a..8dae17e 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ blazingly fast markdown blog software written in rust memory safe
 - [x] finish writing this document
 - [x] document config
 - [ ] blog thumbnail and favicon
-- [ ] fix webkit dates (what.)
+- [x] fix webkit dates (what.)
 - [ ] sort asc/desc
 - [x] alt text for post icon
 - [ ] extend syntect options
diff --git a/static/date.js b/static/date.js
index 1f6ca29..c9818fc 100644
--- a/static/date.js
+++ b/static/date.js
@@ -1,5 +1,7 @@
-for (let el of document.querySelectorAll(".date-rfc3339")) {
-	let date = new Date(Date.parse(el.textContent));
-	el.textContent = date.toLocaleString();
-	el.classList.remove("date-rfc3339");
+function replaceDates() {
+	for (let el of document.querySelectorAll(".date-rfc3339")) {
+		let date = new Date(Date.parse(el.textContent));
+		el.textContent = date.toLocaleString();
+		el.classList.remove("date-rfc3339");
+	}
 }
diff --git a/static/main.js b/static/main.js
index 6a00b13..b9261ce 100644
--- a/static/main.js
+++ b/static/main.js
@@ -1,40 +1,11 @@
+replaceDates();
+
 let form = document.getElementById("sort");
-let posts = document.getElementById("posts");
-
-let postsName = document.createElement("div");
-
-function initialSort(source, target) {
-	let posts = [];
-	for (let post of source.children) {
-		let title = post.firstElementChild.innerText;
-		posts.push([title, post.cloneNode(true)]);
-	}
-	posts.sort(([a, _1], [b, _2]) => a.toLocaleLowerCase().localeCompare(b.toLocaleLowerCase()));
-	for (let [_, post] of posts) {
-		target.appendChild(post);
-	}
+if (form) {
+	let postsByDate = document.getElementById("posts");
+	let postsByName = document.createElement("div");
+	populateByName(postsByDate, postsByName);
+	postsByDate.parentNode.appendChild(postsByName);
+	handleSort(form, postsByDate, postsByName);
+	sort(form.sort.value, postsByDate, postsByName);
 }
-
-function sort(by) {
-	console.log("sorting by", by);
-	switch (by) {
-		case "date":
-			posts.style.display = "block";
-			postsName.style.display = "none";
-			break;
-		case "name":
-			postsName.style.display = "block";
-			posts.style.display = "none";
-			break;
-	}
-}
-
-function handleSort() {
-	if (!form) return;
-	for (let el of form.sort) el.addEventListener("change", () => sort(form.sort.value));
-}
-
-initialSort(posts, postsName);
-posts.parentNode.appendChild(postsName);
-handleSort();
-sort(form.sort.value);
diff --git a/static/sort.js b/static/sort.js
new file mode 100644
index 0000000..66197cc
--- /dev/null
+++ b/static/sort.js
@@ -0,0 +1,32 @@
+function populateByName(source, target) {
+	let posts = [];
+	for (let post of source.children) {
+		let title = post.firstElementChild.innerText;
+		posts.push([title, post.cloneNode(true)]);
+	}
+	posts.sort(([a, _1], [b, _2]) => a.toLocaleLowerCase().localeCompare(b.toLocaleLowerCase()));
+	for (let [_, post] of posts) {
+		target.appendChild(post);
+	}
+}
+
+function sort(by, dateEl, nameEl) {
+	console.log("sorting by", by);
+	switch (by) {
+		case "date":
+			dateEl.style.display = "block";
+			nameEl.style.display = "none";
+			break;
+		case "name":
+			nameEl.style.display = "block";
+			dateEl.style.display = "none";
+			break;
+	}
+}
+
+function handleSort(form, dateEl, nameEl) {
+	for (let el of form.sort)
+		el.addEventListener("change", () => {
+			if (el.checked) sort(el.value, dateEl, nameEl);
+		});
+}
diff --git a/templates/index.html b/templates/index.html
index 43bcd14..7cfd817 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -18,6 +18,7 @@
 		<!-- prettier-br -->
 		{% if js %}
 		<script src="/static/date.js" defer></script>
+		<script src="/static/sort.js" defer></script>
 		<script src="/static/main.js" defer></script>
 		{% endif %}
 	</head>
diff --git a/templates/post.html b/templates/post.html
index 5c4daf1..7250a8e 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -32,6 +32,7 @@
 		<link rel="stylesheet" href="/static/style.css" />
 		<link rel="stylesheet" href="/static/post.css" />
 		{% if js %}
+		<script src="/static/date.js" defer></script>
 		<script src="/static/main.js" defer></script>
 		{% endif %}
 	</head>