diff --git a/assets/js/news.js b/assets/js/news.js
index c902d3f..ac9d8b6 100644
--- a/assets/js/news.js
+++ b/assets/js/news.js
@@ -1,5 +1,30 @@
-$(document).ready(function() {
-	$("article section").each(function(){
-		$('#sidebar ul').append("<li><a href='#"+$(this).attr("id")+"'>"+$(this).find(".title").text()+"</a></li>");
-	});
-});
\ No newline at end of file
+"use strict";
+/**
+ * Generate sidebar with the news titles. Required because blank HTML is used.
+ */
+
+const doFillSidebar = () => {
+  const sidebarList = document.querySelector("#sidebar ul");
+  if(!sidebarList) {
+    console.warn("Sidebar missing for news.")
+    return;
+  }
+  
+  document.querySelectorAll("article section").forEach(section => {
+    const id = section.id;
+    if(!id) {
+      console.warn("ID missing for news.")
+      return;
+    }
+    
+    const titleText = section.querySelector(".title")?.textContent.trim() ?? "";
+    sidebarList.insertAdjacentHTML("beforeend", `<li><a href="#${id}">${titleText}</a></li>`);
+  });
+};
+
+// Failsafe loading pattern.
+if(document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", doFillSidebar);
+} else {
+  doFillSidebar();
+}
diff --git a/news.html b/news.html
index 5b0b265..5f22e11 100644
--- a/news.html
+++ b/news.html
@@ -16,7 +16,7 @@
 	<script src="assets/js/jquery-1.9.1.min.js"></script>
 
 	<script src="assets/js/header.js"></script>
-	<script src="assets/js/news.js"></script>
+	<script src="assets/js/news.js" async></script>
 </head>
 <body>